Remocn

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).

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

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

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/ social/paper) — pick components whose vibe fits the brand. paper is the stop-motion kit: a quantized ~10-poses-per-second clock, handwriting and ink. Those components read as one world, so mix them with each other rather than with the smooth tiers.