How to generate motion graphics with Claude Code in 6 steps, driven purely by time
aakashgupta · x · 2026-10-01
Aakash Gupta shares a six-step workflow for generating motion graphics with Claude Sonnet 5.5 inside Claude Code:
- Provide a reference: screenshot a graphic you like, attach it, and ask for "one HTML file, inline SVG, no libraries, a 6 second loop" — state the loop length up front so the model doesn't guess.
- Write the states in order: six lines of plain English specifying timings (key chip at 0.6s, palette at 0.95s, letters landing 1.35–2.1s with list filtering, Enter at 3.9s, toast rising).
- Make time the only input: every element is a pure function of t (0–6s), no timers or CSS keyframes, frame 0 equals frame 6 for a seamless loop.
The remaining steps cover iterative fixing, with the core idea being: visual reference + explicit timeline + pure-function rendering makes motion graphics reliably reproducible by coding agents.
More from coding & agent
- Codiff 1.15 adds direct code editing, plus a VS Code speed config — cnakazawa · 2026-10-01
- Runway MCP Lands in ChatGPT App Directory: Generate Video From Any Agent — tlakomy · 2026-10-01
- ComfyUI test: Qwen Image 2.1 beats FLUX.2 Krea Turbo at character sheets, ~3x faster — cgpixel23 · 2026-10-01
- Developer uses Claude Opus to turn hundreds of Three.js experiments into a music video — creatoroff · 2026-10-01
- Agent security mindset: least privilege to monitoring, in five layers — goyalshaliniuk · 2026-10-01
- 5 AI agent security risks: browsing, APIs and new attack surfaces — goyalshaliniuk · 2026-10-01