AE to Remotion
Motion graphics written as code instead of dragged on a timeline
A translation layer that maps After Effects concepts onto Remotion, so motion graphics can be written as React components instead of hand-animated in a timeline. Video becomes something that can be version-controlled, diffed, reviewed, parameterised, and re-rendered by a machine on a schedule. An eight-second showcase composition is built entirely on the toolkit.
The problem
Motion graphics normally live inside a visual timeline, where every animation is hand-tweaked in a binary project file. That file cannot be diffed, reviewed, or generated — which makes changing a single word across fifty videos a manual job, and makes automated rendering impossible. Moving that work into code sounds obvious until you try it: the timeline concepts an editor relies on have no direct equivalent in a React renderer.
What I built
Built and rendering. The showcase composition outputs an eight-second intro at 1920×1080 and 60fps — 600 frames, roughly four minutes of render time — and the project type-checks clean. The concept map in the README states plainly which After Effects features do not carry over, including 3D layers, rather than leaving the gaps to be discovered mid-project.
How it works
The toolkit rebuilds the After Effects vocabulary as React primitives. Null objects become components that apply a transform to their children and publish the composed world transform on context, which is what makes inverse parenting possible — a child that deliberately ignores its parent reads that context and applies the inverse. Adjustment layers use a backdrop-filter on a sibling painted above the layers it grades, so the effect applies to everything beneath it without wrapping it. Track mattes are SVG masks driving a CSS mask-image, supporting alpha, luma and inverted-luma modes, with the inverted case handled by a white backing rectangle and a difference blend. Keyframes take the same four bezier control values as the After Effects speed graph, and overshoot presets use a real spring solver rather than a baked curve.
Highlights
- Null objects and parenting rebuilt as React context, including deliberate inverse parenting
- Adjustment layers implemented with backdrop-filter on a sibling painted above the graded layers
- Track mattes via SVG masks in alpha, luma and inverted-luma modes
- Keyframes take the same four bezier control values as the After Effects speed graph
- Overshoot and bounce use a real spring solver rather than a baked easing curve
- Every animation is frame-relative, so a sequence can be retimed without re-keying it
Let's build yours.
Tell me what you're trying to ship — you'll get a scoped plan and a straight answer.