Remotion Video Components

What problem does it solve?

Remotion video component design has historically been fragmented, forcing engineers to rewrite sequence logic for each video. This skill provides a clear, frame-driven pattern that helps teams build consistent, reusable components for Remotion, reducing duplication and speeding up authoring.

Core Features & Use Cases

• Single Responsibility: each sequence component handles one video segment (IntroSequence, BookReveal, StatsReveal, etc.).
• Reusable Animations: extract common animations to src/lib/animations.ts (fadeIn, slideIn, scaleIn, etc.).
• Composition Patterns: assemble sequences in src/compositions/MonthlyRecap/index.tsx and apply path aliases like '@/components/...'.
• TypeScript & Props: strict interfaces for all components to ensure strong typing and predictable rendering.
• Purely Frame-Based: components compute visuals from frame numbers via useCurrentFrame/useVideoConfig without runtime state.

Quick Start

Create a new Remotion sequence component under src/compositions/MonthlyRecap and assemble it with existing IntroSequence and BookReveal components to render a video.