GSAPLive version →
The 15-second podcast opener by Dtmg.tv Studio, rebuilt four times from one shared design: the same layers, keyframes and easing curves, with each engine supplying the motion and the render. All videos are 1920×1080 at 25 fps. Portraits are abstract halftone placeholders.
Notes
| Engine | Engine code | 1080p render, 375 frames | Worked well | Got in the way |
|---|---|---|---|---|
| GSAP gsap 3 + CustomEase | 46 lines | 118 s Playwright seek + screenshot | Timeline position parameter maps one-to-one onto a motion designer's keyframes. Tiny bundle (79 KB). Scrubbing is instant. | No renderer of its own: video output needs a headless browser stepping frames, which is the slowest path here. |
| Framer Motion motion/react | 64 lines | 112 s Playwright seek + screenshot | useTransform chains off a single time value are clean and fully seekable. Good if the piece lives inside a React UI. | Built for UI transitions, not timelines: hold frames needed a workaround, SVG transforms had to be written by hand, and React is in the bundle (279 KB). Same browser capture cost as GSAP. |
| Remotion remotion 4 | 61 lines | 17 s remotion renderMedia, 4 tabs | Frame-as-a-function model is deterministic by design. Player and renderer share one component, and parallel rendering is built in. | Downloads its own Chrome. Asset loading needs delayRender. The company license applies to teams above the free tier. |
| fframes Rust, CPU tiny-skia backend | 100 lines | 16 s native, all cores | By far the fastest render, with no browser involved. The CLI checks clipped text, prints contact sheets and renders single frames. | Rust toolchain plus an FFmpeg source build to get going. The SVG renderer is a subset of the browser's, so check every pattern and filter. No live web player here (it has a WASM editor, not wired up). |
Line counts cover each engine's own code. The shared design (134 lines) and small page helpers are common to all four. Render times are wall-clock on an 8-core CPU box with no GPU.