$ man remotion

Remotion

A React framework that renders video frame by frame — write JSX components, render at target FPS, encode to MP4. No GPU, no timeline editor, no After Effects.

by Shawn Tenam

Video is a content type that was always disconnected from the rest of the system. After Effects exports live on a hard drive. Canva projects live in a SaaS database. Neither shares design tokens, data, or deploy pipelines with your websites. Remotion changes that by making video a React component that lives in your codebase. Same shared package, same color palette, same monorepo CI. When I change a brand color, the websites and the videos all update on the next build. Video stopped being a separate workflow and became another content type in the system.

The video app lives at website/apps/video/ inside the Turborepo monorepo. Nine compositions in Root.tsx — three brands times three aspect ratios. A useScale() hook handles responsive sizing. Scenes use Perlin noise from @remotion/noise for deterministic animation. npm run render:all generates all variants. The SQLite content index tracks every video file with brand, format, and deployment status.