remocn-video

name	remocn-video
description	Use when creating a video — product demo, launch, promo, feature announcement, reel, or showcase — with remocn/Remotion in any aspect ratio (16:9, 9:16, 1:1, 4:5, 21:9), or when asked to compose a Remotion timeline, animate a scene, or render an MP4.
license	MIT

remocn-video

A remocn video is one Remotion composition: a timed sequence of beats (scenes) built from remocn components, rendered to MP4. This skill covers the video-specific workflow — aspect ratio selection, beat and timing budgets, the composition skeleton, and render. Component-level knowledge comes from the official remocn skill and the live catalog — do not guess components from memory.

Prerequisites (do these first)

1. Remotion project exists — else npx create-video@latest.
2. components.json must have the remocn registry (shadcn init first if missing):

   "registries": { "@remocn": "https://remocn.dev/r/{name}.json" }
   

3. Official remocn skill: npx skills add Remocn/remocn --yes. If unavailable, fetch the catalog live at https://remocn.dev/llms-components.txt and per-component pages at https://remocn.dev/docs/<section>/<name>.md. Network down? Say so and stop — never invent component names or props.
4. Install components: npx shadcn@latest add @remocn/<name> (lands in components/remocn/). Transitions need @remotion/transitions installed too.

Pick the aspect ratio first

Match platform and intent — full matrix in references/aspect-ratios.md:

• 16:9 (1920×1080) — YouTube, web, most product demos.
• 9:16 (1080×1920) — Reels, Shorts, TikTok, Stories.
• 1:1 (1080×1080) / 4:5 (1080×1350) — feed-native social video.
• 21:9 (2560×1080) — cinematic.

Set width / height / fps on the Composition once (fps 30). remocn's reference canvas is 1280×720; on other sizes scale fontSize by canvasWidth / 1280 and respect the safe zones in references/aspect-ratios.md. If the brief does not state a ratio, ask — never silently pick.

Beats → timing budget

A video is 5–10 beats, one idea per beat; a text beat lives ~2s (60f @30fps). Structure: Hook (1–2) → Body (3–5) → Close (1). Budget the whole timeline in frames before writing code:

Beat	Content	Frames
Hook	animated headline	150
Body 1	feature line + UI sim	180
Body 2	feature line + UI sim	180
Body 3	stat (rolling-number)	150
Close	CTA + logo	150
Total	≈27s @30fps	810

durationInFrames must equal the sum of all Sequence frames.

Composition skeleton

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { zoomBlur } from "@/components/remocn/zoom-blur";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={150}>
    <HookBeat />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={zoomBlur()}
    timing={linearTiming({ durationInFrames: 18 })}
  />
  <TransitionSeries.Sequence durationInFrames={180}>
    <FeatureBeat />
  </TransitionSeries.Sequence>
  {/* ... */}
</TransitionSeries>

Wrap every scene in Backdrop (or a shader) rather than hardcoding background colors. A component's Length is the floor for its Sequence — add hold time so text can be read after the motion settles.

Component shortcuts

• Headlines: soft-blur-in (premium), per-character-rise (crisp), tracking-in (brand), mask-reveal-up (multi-line), kinetic-center-build (punchy).
• Backgrounds: shader-mesh-gradient, shader-perlin-noise (calm), shader-grain-gradient (film texture), backdrop (flat).
• Transitions: zoom-blur (workhorse cut), whip-pan (energetic), slide-swap / spring-settle (scene sequencers), grain-dissolve (editorial).
• Numbers/proof: rolling-number, number-wheel, github-stars, confetti.
• UI sims: terminal-simulator, glass-code-block, simulated-cursor, chat-flow.

Match vibe tags to the brand; don't mix paper (stop-motion) with the smooth tiers. Fetch exact props per component from the catalog.

Render

npx remotion studio              # watch/preview in the browser
npx remotion render <composition-id> out/video.mp4   # default h264

Quality/delivery: --codec=h264 --crf=18; for 4K, set the composition size up — don't stretch a smaller canvas. Vertical 9:16 still renders as video.mp4; --pixel-format stays default unless the platform asks.

Common mistakes

• Sequence frames that don't sum to durationInFrames → Remotion error or dead air. Budget first.
• Text beats shorter than reading time (< ~2s).
• Wrong size or fps for the target platform (brief says 9:16 → not 1280×720).
• Forgetting @remotion/transitions before TransitionSeries.
• Nondeterministic animation — Math.random() / setInterval; use @remotion/random with a seed.
• No safe-zone padding on 9:16 (platform chrome covers edges).
• Math.random() inside a shader or component that must render deterministically.
• Reaching for still-export (that's the remocn-carousel skill's job) when the deliverable is a video.