Remotion Engine

What is Remotion?

Remotion is a React-based framework for creating videos programmatically. Instead of writing imperative animation code, you compose React components that render frames as a function of the current time. Each frame is a React render — the same mental model as building a web page, but animated over time.

TKK's Remotion integration is manifest-driven: you write a JSON file describing the scenes, and the component library handles all the rendering. No code changes per video.

Manifest-Driven Architecture

Instead of writing Python code for each video, Remotion videos are defined entirely by a JSON manifest. The manifest specifies scenes, components, text, timing, and zone placement. The renderer reads this manifest and produces a video.

Component Library

The Remotion engine includes a library of reusable scene components. Each component handles its own enter/hold/exit animation lifecycle with spring physics and crossfade transitions.

Zone System

Remotion uses the same 5-zone vertical layout as Manim, pixel-mapped for the 1080x1920 frame. Components are placed by zone name in the manifest — the renderer handles the positioning.

Animation Model

All animations use Remotion's spring physics system. Each component follows a 3-phase lifecycle:

• Enter — spring-animated appearance (scale, opacity, position)
• Hold — static display during the scene's core duration
• Exit — crossfade transition to the next scene

Transitions between scenes use crossfade by default, with the exit of one scene overlapping the enter of the next.

Strengths & Current State