Code-Driven Motion Graphics Engine
$1,200 freelance motion designer → under $2 for a 30-second motion graphic
- Typical freelance motion designer cost
- $1,200
- Cost to render a 30-second piece
- <$2
- Cost reduction vs. a designer
- 99%+
- Hand-keyed frames
- 0
Typical freelance motion designer cost
Cost to render a 30-second piece
Cost reduction vs. a designer
Hand-keyed frames
Imagine 10 episodes? That's $11,980 saved.
Feed it a script or a raw recording. Walk away. It comes back broadcast-ready.
Stage 1
Intake: script or raw recording
A script or a raw recording is all it takes to kick off a run, with no separate brief and no manual prep.
Stage 2
Transcribe & find the hook
Audio is transcribed and the strongest hook or claim in the material is identified automatically, the thing the whole piece gets built around.
Stage 3
AI writing & scene mapping
Claude generates the hook, script, and scene mapping from the source material, ready to drive the data-driven scene library.
Stage 4
Generate & clean up assets
Cut-outs and overlays are generated with real transparency and prepared for compositing; stock footage is sourced automatically where needed.
Stage 5
Render, with a cut list for the human editor
Every stage is reviewed, approved, or sent back for changes before anything costly renders. The motion graphic itself comes back finished; the raw episode comes back with word-level timestamps for the strongest moments, chapters, and titles. The editor still makes the cuts in Premiere by hand, just without hours of scrubbing to find them.
Sample output
A sample motion graphic rendered by the engine. Every chart, cut, and caption is code, not hand-keyed animation.
The AI finds the cut points. You still make the cut. That's the point.
- Problem
- Data-driven motion graphics, the kind with self-drawing charts, cut-out compositing, and cinematic camera moves, normally mean an animator hand-keyframing every element per video. That doesn't scale across dozens of guests, brands, or topics, and editors still burn hours combing raw recordings for the strongest hook to cut around.
- Solution
- A custom Remotion-based animation engine renders every frame programmatically instead of hand-keyed: cinematic push-ins and parallax, cut-out compositing over live footage, self-drawing data charts, and captions synced to word-level voice timing, all driven by a reusable, data-driven scene library that serves any guest, brand, or topic from structured inputs alone. Because every pixel comes from code, not an AI model generating video frame by frame, there's no hallucination risk in the numbers, charts, or text on screen, and render cost stays a fraction of per-second AI-video pricing, since a code render is just compute, not a paid generation call. It's wrapped in an n8n-orchestrated pipeline: transcription and automatic hook/claim detection, Claude-driven scripting and scene mapping, asset generation and cleanup, then human-in-the-loop approval gates before any costly render runs, with error handling, retries, and cost logging built in for real production use, not demos. Anything the pipeline can't verify, like a missing data source or a required asset, is a hard gate: the run halts and alerts instead of quietly guessing or fabricating a number.
- Outcome
- One engine renders broadcast-quality Full HD motion graphics for any guest, brand, or topic, fully versioned, reviewed at every gate, with no fabricated data ever reaching the final render. The episode cut itself still gets finished by hand in Premiere. This hands the editor a cut list with exact word-level timestamps instead of hours spent scrubbing raw footage for the moments worth keeping.
- n8n
- Remotion
- Claude
- ElevenLabs
- ffmpeg
- Docker