Write motion as code. Resolve any frame as a pure function.
A TypeScript runtime for frame-based video. A scene generator runs once and records what it authored; at(frame) rebuilds any frame from that record, in any order, with the same result every time.
Compile, resolve, render
- Sequential to write
- A scene reads like a storyboard: spawn, tween, wait, tween. yield* moves an authored cursor, and nothing plays while it runs.
- Random access to read
- at(frame) rebuilds one frame from the record. Frame 400 costs the same whether or not anything asked for frame 399.
- Any backend draws it
- Renderers for the DOM, Pixi, Three.js and Skia all read the same resolved frame.
- Plays where you need it
- One composition plays in Remotion, in HyperFrames, in the native preview and through the video exporter.
- Host values have a door
- Measured boxes, sensors and fetched data enter through channels. A cached frame is dropped only when a channel it read changes.
- Testable without pixels
- Compile a scene, resolve a frame and assert on the actors, with no canvas or browser involved.
Start reading
Quickstart
Write a scene, read a frame, draw it, play it.
How it works
Compile time, resolve time and render time.
Reactivity
signal, derived, channel and the rest of the state model.
Rendering
Renderers, backends, effects and hosts.
Complete example
A whole Remotion composition in two files.
Component library
Actor families and effects you install as source with shadcn.