Remotion

Remotion turns video creation into a programming problem. Every frame of a video is a React component tree evaluated at a specific point in time, so instead of dragging clips on a timeline you write <Composition> definitions, animate values with interpolate() and spring(), and let the actual DOM/CSS/SVG rendering engine of a headless browser paint each frame. That means you get real web layout, real fonts, real data-binding, and a live preview studio, then export deterministic pixel-perfect video by rendering every frame and stitching them with FFmpeg.

The project is organized as a large monorepo where the remotion package is the lean core (Composition/Sequence primitives, animation helpers, zero runtime dependencies beyond React) and dozens of @remotion/* packages add capability on top: @remotion/cli for command-line rendering, @remotion/player for embedding a live preview in any React app, @remotion/renderer for server-side/Node rendering via a bundled headless Chromium, and @remotion/lambda for rendering at scale on AWS infrastructure. This makes Remotion equally suited to hand-authoring a single explainer video, generating thousands of personalized videos from a data feed, or building a full in-browser video editor on top of its primitives.

What You Get

• <Composition> and <Sequence> primitives for declaring named, dimensioned, timed video scenes as ordinary React components.
• Frame-accurate animation hooks — useCurrentFrame(), interpolate(), spring(), and easing utilities for deterministic per-frame values.
• A local Studio with a scrubbable timeline, hot reload, and prop editing for iterating on a video the way you’d iterate on a web app.
• Server-side and cloud rendering — @remotion/renderer for Node/CLI rendering via headless Chromium, @remotion/lambda for distributed rendering on AWS.
• An embeddable player (@remotion/player) to drop a live Remotion composition straight into any React application, not just export it as a file.
• A wide first-party package ecosystem — captions, GIFs, Lottie/three.js integration, media parsing, TikTok/webcodecs helpers — for extending compositions without hand-rolled glue code.

Common Use Cases

• Generating personalized or data-driven videos in bulk (e.g. one rendered video per row of a CSV or API response).
• Building marketing, product-demo, or social-media videos as versioned, reviewable code instead of opaque editor project files.
• Embedding a live, interactive video/animation player inside a product UI using @remotion/player.
• Rendering video at scale in CI or serverless infrastructure (AWS Lambda) for SaaS products that generate video on demand.
• Building custom in-browser video editing tools on top of Remotion’s composition and rendering primitives rather than starting from FFmpeg directly.

Under The Hood

Architecture The monorepo separates concerns cleanly: packages/core (published as the remotion npm package) defines only the composition/rendering primitives (Composition.tsx, Sequence, CompositionManager, the useCurrentFrame/interpolation layer) and depends on nothing but React as a peer dependency, so it can be embedded in any React tree without pulling in rendering machinery. Everything execution-heavy — headless-browser driving, frame capture, FFmpeg stitching, cloud dispatch — lives in sibling packages (@remotion/renderer, @remotion/cli, @remotion/lambda, @remotion/player) that depend back on remotion for the primitives. This means the render pipeline (bundle with webpack/esbuild → spin up headless Chromium → seek to each frame → capture → encode via FFmpeg) is fully decoupled from how a composition is authored, and the same composition can be rendered locally, on Lambda, or embedded live via the Player without changing component code.

Tech Stack The project is TypeScript-first across ~40+ workspace packages, built with a Turborepo pipeline (turbo run make) and Bun for scripting, with per-package tsc/tsgo builds emitting both CJS and ESM output. Core rendering depends on a bundled/downloaded headless Chromium plus a native Rust-based compositor (packages/compositor* with platform-specific prebuilt binaries) for frame compositing performance, and FFmpeg for final video encoding. Cloud rendering integrates directly with AWS Lambda/S3 (@remotion/lambda), and a large satellite package set (captions, GIFs, Google Fonts, ElevenLabs, three.js/GSAP bindings) is managed under the same monorepo and versioned in lockstep.

Code Quality The core package has an extensive src/test suite (dozens of files covering composition validation, sequencing, drag/prop overrides, easing math, and media resource handling) run with Bun’s test runner, plus a project-wide turbo run lint test CI gate, ESLint via an internal shared config, and strict TypeScript (strict: true, noUnusedLocals/Parameters) across packages. Formatting is enforced via a custom oxfmt toolchain and a repo-wide pre-commit script, indicating a maintained, consistently-styled codebase rather than an assemblage of loosely-linked packages.

What Makes It Unique Remotion’s core insight — that a video frame is just a deterministic function of time rendered through a real browser engine — lets it reuse the entire web platform (CSS animations, SVG, WebGL, arbitrary React data-fetching) as a video-authoring surface instead of building a bespoke video-editing DSL. Combined with first-class support for both a local interactive Studio and headless/distributed rendering (including AWS Lambda) from the same component code, it occupies a distinct niche between traditional video editors and raw FFmpeg scripting: video production that is fully version-controlled, testable, and programmatically generatable at scale.