remocn

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

Installation

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

# Add any component (namespaced shadcn registry)
shadcn add @remocn/blur-out-up

# Component lands at components/remocn/blur-out-up.tsx

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

Component categories

Pick by what you're building. The full catalog with props, defaults, and dependencies is references/components.md — read it before installing.

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: take from / to as ReactNode (the two scenes), plus transitionDuration.
• className?: string on the root.

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.
• Budget each Sequence around the component's natural length — components.md lists it as *Nf @ 30fps* per component. Under-budgeting clips the animation; over-budgeting leaves dead air.
• Tone matching: each catalog entry carries a vibe tag (tech/premium/data/clean/ playful/social) — pick components whose vibe fits the brand.
• Palette & fonts: stay within the library's tokens (references/design.md → tokens) so your own elements don't clash.

Design defaults — avoid AI-slop

When you write your own text, scene chrome, or cards (not the prebuilt components), keep it restrained:

• No decorative letter-spacing on body/heading text you add.
• No text-transform: uppercase / ALL-CAPS defaults — prefer sentence case (Launch, not LAUNCH).
• No gradient text-fills or decorative gradient washes — gradients only as intentional backgrounds.
• No glow / colored drop-shadows or large blur radii (blur > ~24px, spread, multi-layer) — subtle 1px elevation only.

Exception: never strip these from components whose essence is the effect — tracking-in (letter-spacing), mesh-gradient-bg and social cards (gradients), and intentional elevation are all legitimate. The rules govern your additions, not the library.

Full do/avoid examples: references/design.md. For motion quality (timing, anticipation, staging, easing), see references/motion-principles.md.

Gotchas (remocn-specific)

• Transitions wrap two scenes — pass from / to as ReactNode, not as a static instance.
• Terminal scroll is instant — step-function translateY, never spring/ease the scroll.
• overflow: hidden on split layouts — prevents content breakage during width animations.
• Cursor blink is deterministic — Math.floor(frame / 15) % 2 === 0, not intervals.
• Static files go in public/ — load via staticFile('cursor.svg'), not imports.
• Social cards render offline — avatarUrl="" / coverUrl="" fall back to gradients; no fetch.

General Remotion rules (no Math.random(), no setInterval, animate transform not top/left, load fonts before render) live in the remotion-best-practices skill.

Composing a video

Typical product demo:

1. Background: mesh-gradient-bg or dynamic-grid.
2. Title reveal: blur-out-up, staggered-fade-up, or tracking-in.
3. Show the product: browser-flow, terminal-simulator, or glass-code-block.
4. Transition between scenes: frosted-glass-wipe, spatial-push, or directional-wipe.
5. End with impact: confetti, pricing-tier-focus, or a full composition.

Or drop in a full composition (dashboard-populate, terminal-to-browser-deploy, hero-device-assemble) and customize its props.

Reference

• references/components.md — full catalog: props, defaults, dependencies, duration & vibe per component.
• references/design.md — anti-slop design defaults (do/avoid) + design tokens (palette, fonts, canvas).
• references/motion-principles.md — motion-design principles adapted to remocn + Remotion.
• references/anti-patterns.md — common generation mistakes and their fixes.