← docsCreative

/remotion-video-motion

React components → programmatic video.

Sets up Remotion in a project and transports existing React frontend components into video compositions. Provides adapter pattern to decouple components from browser singletons, spring physics for natural motion, and a render pipeline for MP4/WebM/GIF output.

Category

Creative

Execution

Component → adapter → composition → render

Goal

Scaffold Remotion in a React project, transport frontend components into video compositions, and render programmatic motion graphics.

Scope

Applies to

  • +Any React-based codebase (Next.js, Vite, Astro, Rails React mounts)
  • +Product demos and UI animations
  • +Explainer videos from existing components

Does not cover

  • −Non-React projects
  • −Live-action video editing

Triggers

"Remotion video""Animate this component""UI video demo""Import component into Remotion"

Inputs

  • →TargetComponent: The React component to animate
  • →CompositionConfig: Resolution, fps, duration
  • →AnimationSpec: Keyframes, springs, sequence timing

Invariants

  • 01NEVER use Date.now(), Math.random(), or non-deterministic sources in frame render loops
  • 02All static media must use staticFile() or pre-fetched Data URLs
  • 03Target components MUST be decoupled from window.location, localStorage, external API calls
  • 04Prefer spring physics over linear easing for natural UI motion
  • 05Tailwind CSS must be configured via @remotion/tailwind or imported in Root

Procedure

  1. Phase 1ENVIRONMENT — Check/install remotion, @remotion/cli, @remotion/player, zod
  2. Phase 2DECOUPLE — Wrap target component in adapter that uses useCurrentFrame + spring props instead of browser singletons
  3. Phase 3COMPOSITION — Register <Composition> in Root.tsx with Zod schema for type-safe props
  4. Phase 4CHOREOGRAPHY — Layer elements with <Sequence> and <AbsoluteFill>, drive motion with useCurrentFrame + interpolate + spring
  5. Phase 5PRELOAD — Load fonts via @remotion/google-fonts or @fontsource, assets via staticFile()
  6. Phase 6RENDER — Preview in Remotion Studio, render to MP4/WebM/GIF via CLI

Outputs

  • ▸Remotion project structure (Root.tsx, adapters, compositions)
  • ▸Type-safe Zod schema for composition props
  • ▸Rendered video file (MP4/WebM/GIF)

Review Gate

  • [ ]All Remotion dependencies resolve without version conflicts
  • [ ]Components render in Studio without missing styles
  • [ ]Frames render deterministically (no Math.random in render loop)
  • [ ]Props are typed with Zod schema
  • [ ]Motion springs execute smoothly at target FPS