remocn

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha f64d6b0a4620 · 20 Oct 2026Report an issue or request a re-scan

• Publisherremocn GitHub organizationOwner of the repository this skill is read from
• Source folderremocn/remocn/plugins/remocn/skills/remocnThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdictf64d6b0a4620A new audit runs when the source changes
• Repository statusNot archivedLast push 9 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Pick, install and compose remocn components: ready-made Remotion animations, transitions, backgrounds, captions, UI primitives and video templates from a shadcn registry. Use when building a video or scene out of…

---
name: remocn
description: >
  Pick, install and compose remocn components: ready-made Remotion animations, transitions,
  backgrounds, captions, UI primitives and video templates from a shadcn registry. Use when
  building a video or scene out of prebuilt parts (product demo, launch, changelog, intro,
  social clip), adding an animation, transition or background to a Remotion project, or
  choosing between components. Activate for polished Remotion video work even when remocn
  isn't named. Works alongside the Remotion skills: questions about the Remotion API itself
  (interpolate, spring, Sequence, rendering, config) belong to them, not to this skill.
---

# remocn

Copy-paste components for Remotion videos. Components install via `shadcn` and land in
`components/remocn/` — you own the code.

## The catalog lives at remocn.dev

This skill does not carry a copy of the component catalog. There are ~240 components and they
change; a bundled copy goes stale silently. Read the live docs instead.

**Start every component search here:**

```
https://remocn.dev/llms-components.txt
```

One table per category, every installable component, each row carrying `Use for` / `Avoid for`,
natural length, vibe, tier, dependencies, and a link to its full page. Scan it, shortlist, then
fetch only the pages you shortlisted.

**One component's full reference** — props with descriptions, worked examples, all use / don't-use
notes — is the docs URL with `.md` appended:

```
https://remocn.dev/docs/typography/blur-out-up.md
https://remocn.dev/docs/transitions/whip-pan.md
https://remocn.dev/docs/ui/components/dialog.md
```

The index gives you the exact URL per component — don't guess the section from the name, several
components live somewhere non-obvious.

Fetch with whatever your environment provides (a web-fetch tool, `curl`, `WebFetch`). If the
network is unavailable, say so and stop — do not invent props, defaults, or durations from memory,
and do not substitute a component you have not read. A wrong prop name fails at build; an invented
duration silently clips the animation.

## Installation

Prerequisites: a Remotion project (`npx create-video@latest`).

```bash
shadcn add @remocn/blur-out-up
```

`@remocn/<name>` is the canonical namespaced form (configured under `registries` in
`components.json`). The plain registry URL `https://remocn.dev/r/<name>.json` also works.

### Dependencies install automatically

Many components pull others via `registryDependencies` — `shadcn` installs them transitively.
For example, `shadcn add @remocn/typewriter` also pulls `@remocn/remocn-ui` and `@remocn/caret`.

- **`@remocn/remocn-ui`** is the shared core lib (timeline-fold hook, theme context, color math).
  Most UI Primitives depend on it. You rarely install it directly.

## Two tiers

remocn has two kinds of components — they have **different APIs**:

- **Animation tier** (`remocn`) — text animations, transitions, backgrounds, UI-block sims,
  brand/social cards, full compositions. Frame-driven. Shared props: `speed` (time multiplier),
  and for text: `fontSize`, `color`, `fontWeight`.
- **UI Primitives** (`remocn-ui`) — timeline-driven shadcn-style primitives (button, dialog,
  select, command-menu, tooltip...). State-based props (`state`, `style`, `variant`, `theme`).
  **No `speed` prop.** Built on `@remocn/remocn-ui`.

The index's `Tier` column tells you which one you are looking at before you open the page.

## Component patterns

Conventions differ by tier — don't assume animation-tier props on a primitive.

### Animation tier (`remocn`)

- Named `Props` interface per component (e.g. `BlurOutUpProps`).
- `speed?: number` — global time multiplier (default `1`), applied as `frame * speed`.
- Text components: `fontSize`, `color`, `fontWeight`.
- Transitions: lowercase factories (e.g. `whipPan(props)`) returning a `TransitionPresentation` — pass to `TransitionSeries.Transition` via `presentation`, pace with `linearTiming` / `springTiming`.
- `className?: string` on the root.

Not everything filed under transitions is a presentation: `slide-swap` and `spring-settle` are scene
sequencers that take a `scenes` array and own the whole timeline. The page says which one you have.

### UI Primitives (`remocn-ui`)

- State-based, **not** `speed`-based: `state` (e.g. `"open"` / `"closed"`), `style`, `variant`,
  `size`, `theme?: Partial<RemocnTheme>`.
- The opened/closed/active state is a pure function of the timeline (keyframed presets).
- Compose modal-layer primitives (dialog, alert-dialog, drawer) with a trigger element — see
  each component's example.

### Animation API

```tsx
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// Deterministic randomness (NEVER Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);
```

### Composition structure

```tsx
import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <Typewriter text="npm install remocn" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>
```

### Canvas & timing

- **Canvas standard:** `1280×720 @ 30fps`. Components are laid out for it.
- **`Length` is the component's own motion, not the whole beat.** For a transition it is the value
  to pass to `linearTiming` / `springTiming`; for everything else it is the frame the animation
  finishes on. Treat it as the floor for the `Sequence` and add hold time when the element should
  stay on screen after it settles. `state-driven` means the component renders from its `state` prop
  and has no duration of its own.
- **Tone matching:** each entry carries a `vibe` tag (`tech`/`premium`/`data`/`clean`/`playful`/
  `soc

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-20
   ✓SAFE B 89 / 100

   first audit · source f64d6b0a4620

Questions about remocn

• github.com/remocn/remocn/tree/main/plugins/remocn/skills/remocn — the audited source at commit f64d6b0a4620 and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology