reframe

reframe

Declarative motion graphics that AI can write, humans can tweak — and the human's edits survive an AI regeneration.

At "prompt → mp4", reframe is on par with Hyperframes or a Remotion skill — our own benchmark says exactly that, parity not superiority. The difference starts on the second turn: what you get back is not freeform code but an addressable document, so you can keep tweaking, regenerating, and scaling it without your changes being silently lost.

Top: a scene with human overlay edits applied (brand color, retimed reveal, watermark). Bottom: an AI fully regenerated the base scene — different layout, different timing — and the same overlay reapplied by stable id. 4 edits survived; the one renamed node was reported as an orphan, never silently dropped.

The demo above is a reframe scene (examples/scenes/reframe-demo.ts) — render it yourself: pnpm reframe render examples/scenes/reframe-demo.ts.

The loop

scene.ts  ──(written by you, or by an AI given `pnpm reframe guide`)──▶  IR (plain JSON data)
   │                                                                        │
   ▼                                                                        ▼
preview: scrub + knobs ──▶ edits recorded as an overlay JSON (non-destructive)
   │                                                                        │
   ▼                                                                        ▼
render: deterministic mp4 (same input → byte-identical frames)   ◀── overlay reapplies
                                                                     even after an AI
                                                                     regenerates the base

Everything is a pure function of time: evaluate(scene, t) — no wall clocks, no randomness without a seed, scrubbing and distributed rendering for free. And it's enforced: reframe lint compiles the scene twice and flags any IR that differs (a Math.random() or Date baked into a prop), so a scene that would silently render differently each time fails the gate before you ship it.

Generative choreography at scale

The kind of scene that is hand-rolled timeline math in GSAP or per-element interpolate() plumbing in React is ~100 lines here, because the host language generates the nodes, states, and phase-shifted behaviors — and the output is still data: every dot, glyph, and moon keeps a stable id you can tweak in the preview.

bloom.ts — 300 dots on a golden-angle spiral: radial bloom, traveling breath wave, chromatic ripple, vortex collapse	wavefield.ts — physical interference: 1,152 phase-shifted oscillators on a 32×18 grid, second ripple source joins mid-scene
orbit.ts — nested transform composition: moons orbit planets orbit a sun, the whole system tilts — three nested groups, three linear tweens	typewave.ts — character-level kinetic type: cascade, standing wave, shatter with spin, and a second phrase assembling from the debris
glyph-reveal.ts — the archival stop-motion format: AI-generated plates as image nodes, ~7fps hard cuts, push-in, camera shake, a tick per cut. Swap any plate from an overlay or batch row: nodes.frame-3.src

Motion vocabulary: name a motion, don't keyframe it

Motion is hard to put into words and tedious to hand-key, so reframe ships a small set of named motion presets: draw-bloom, punch-in, rise-settle, slide-bank, reveal-orbit, spin-forge. Each is a seeded generator, not a canned template. The same name yields a family of distinct takes, and a seed varies it within that family (an 8-seed spread stays measurably different yet recognizably the same motion, gated in the tests).

motionPreset("spin-forge", { target: logo, energy: 0.8, seed: 3 })