/remotion-video

name: remotion-video
description: 'Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS. Triggers on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "video with voiceover". NOT for math animations, use concept-to-video.'
metadata:
  version: 1.1.1
  category: business
  tags: [video, react, remotion, motion-graphics]
  difficulty: advanced

Remotion Video

Creates production-grade videos using Remotion — a React framework where video is code. Every frame is a React component. Animations use spring physics and frame-based interpolation.

Reference Files

| File | Purpose | | --------------------------------------- | ---------------------------------------------------------------- | | `references/rules/fundamentals.md` | useCurrentFrame, useVideoConfig, interpolate, spring, core hooks | | `references/rules/animations.md` | Easing, spring config, interpolateColors, timing patterns | | `references/rules/compositions.md` | Composition, registerRoot, Folder, calculateMetadata | | `references/rules/media.md` | Img, Video, OffthreadVideo, Audio, staticFile, async loading | | `references/rules/text-and-fonts.md` | Google Fonts, local fonts, text measurement, typography | | `references/rules/tailwind.md` | TailwindCSS integration, utility-first styling in Remotion | | `references/rules/audio.md` | Audio component, volume curves, trimming, frame-synced audio | | `references/rules/subtitles.md` | Caption system, SRT/VTT parsing, word-level timing | | `references/rules/three-d.md` | @remotion/three, ThreeCanvas, React Three Fiber integration | | `references/rules/charts.md` | Bar, pie, line chart animation patterns | | `references/rules/rendering.md` | CLI render, renderMedia API, quality presets | | `references/rules/data-driven.md` | Dataset rendering, batch generation, parametric compositions | | `references/templates/explainer.tsx` | Parametric tech explainer template | | `references/templates/product-demo.tsx` | Product showcase template | | `references/templates/data-viz.tsx` | Animated chart composition template | | `scripts/scaffold_project.sh` | Bootstrap a new Remotion project with TailwindCSS | | `scripts/render.sh` | Render wrapper with quality presets and format options |

Why Remotion

Remotion treats video as a React application. Each frame is a pure function of time — given frame N and total frames F, your component renders deterministically. This means:

• **Component composition**: Nest scenes, reuse components, apply CSS.
• **Spring physics**: `spring()` gives natural motion without hand-tweaking cubic beziers.
• **Asset pipeline**: Import images, audio, video — the same way you import in React.
• **Iterative workflow**: Edit code → hot-reload preview → render final. The `.tsx` file IS the editable intermediate.
• **Data-driven at scale**: Render thousands of personalized videos by passing different props to the same composition.

Workflow

Scaffold → Compose → Preview → Iterate → Render

1. **Scaffold** the project (once per video project) 2. **Interpret** the user's concept — choose the right template and rule files 3. **Compose** React components for each scene 4. **Preview** in Remotion Studio (`npm run dev`) 5. **Iterate** based on user feedback 6. **Render** final video via `scripts/render.sh`

Step 0: Ensure Dependencies

Node.js 18+ is required. Check before scaffolding:

node --version   # Must be >= 18.0.0
npm --version

If Node.js is not available, inform the user — Remotion cannot run without it.

Step 1: Scaffold the Project

Run `scripts/scaffold_project.sh` to create a new Remotion project. The script is idempotent — it detects an existing project and skips re-initialization.

bash scripts/scaffold_project.sh my-video-project
cd my-video-project
npm run dev   # Opens Remotion Studio at localhost:3000

Step 2: Interpret the Concept

Determine the best approach. Read the relevant rule file for detailed patterns.

| Content type | Rule file | Template | | ----------------------------------- | ----------------------- | ---------------- | | Explainer / educational | fundamentals.md | explainer.tsx | | Product demo / marketing | animations.md | product-demo.tsx | | Data visualization / animated chart | charts.md | data-viz.tsx | | Video with voiceover / narration | audio.md + subtitles.md | explainer.tsx | | Social media clip (short, looping) | animations.md | product-demo.tsx | | 3D scene / abstract motion graphics | three-d.md | (custom) | | Personalized / batch generation | data-driven.md | any | | Video with embedded media | media.md | any |

Step 3: Compose the Components

Core rules for writing Remotion components:

• **One composition per video**: `registerRoot` points to one root composition.
• **Sequences for timing**: Use `<Sequence from={30} durationInFrames={60}>` to place scenes at specific frames.
• **AbsoluteFill for layering**: Use `<AbsoluteFill>` as the base for any full-screen element.
• **Frame-based math only**: Derive all animation state from `useCurrentFrame()`. Never use `Date.now()` or `setTimeout`.
• **Spring over easing**: Prefer `spring({ frame, fps })` for natural motion.
• **Props for everything variable**: Hardcoded values