Guide Shows How to Build Motion Graphics With Claude Code
▶
Aakash Gupta shares a six-step workflow for generating animated motion graphics in Claude Code with Claude Sonnet 5.5, covering reference images, timed states, time-based functions, styling rules, self-review, and ffmpeg GIF export.
Original post · 2 min read
Claude Sonnet 5.5 can (finally) generate motion graphics
15 motion graphics in Claude Code (my 6 steps):
1. Show it an example.
Screenshot a graphic you like (the one on this post works), attach it and write: "Make this move. One HTML file, inline SVG, no libraries, a 6 second loop." Start there and fix it round by round. Say the loop length up front so it does not guess.
2. Write the states, in order.
A reference gets you the look. For the motion, say what happens and when. My command palette brief: the key chip presses at 0.6s, the palette springs open at 0.95s, four letters land between 1.35s and 2.1s and the list filters after each one, the highlight drops a row, Enter at 3.9s, a toast rises. Six lines of plain English.
3. Make time the only input.
Tell it every element is a pure function of t, from 0 to 6 seconds. No timers, no CSS keyframes, and frame 0 equals frame 6. The loop closes itself and any frame can be drawn on demand. The palette opening is a single line: k = spring(t - 0.95, 240, 18).
4. Give it colours, fonts and rules for motion.
Hex codes and font names. Mine are Claude orange #D97757, navy #0F1B2E and DM Sans. Words like clean and modern do nothing. Springs for anything that lands, eases for anything that leaves. Mix them up and it feels cheap. When you can, morph one shape into the next. In my terminal loop, a log line's highlight bar grows into a dashboard card. Same rectangle, new size.
5. Make it check itself.
"Render 8 moments across the loop side by side and fix what's wrong." That is how a black sphere and two cards stuck in one slot got caught. Point at fixes by timestamp: "at 2.0s the second row overlaps the first." Read the sheet yourself too.
6. Export a GIF that stays sharp.
Save every frame as a PNG, then run ffmpeg with palettegen stats_mode=full and paletteuse dither=none. I use 15 frames a second. One palette for the whole clip and no dithering, so flat colours stay flat. Post it as an image, not a video, and check the animation survived the upload.
The 15 in the image include a prompt bar that turns into a web page, a funnel you can watch leak, a donut that unrolls into a bar and a command palette that filters as you type. Each one is a single HTML file with no libraries.
I write about builds like this at aibyaakash.com:
aibyaakash.com?utm_source=ag-20261001
Pick one motion. Write the six lines. Ship it today.
15 motion graphics in Claude Code (my 6 steps):
1. Show it an example.
Screenshot a graphic you like (the one on this post works), attach it and write: "Make this move. One HTML file, inline SVG, no libraries, a 6 second loop." Start there and fix it round by round. Say the loop length up front so it does not guess.
2. Write the states, in order.
A reference gets you the look. For the motion, say what happens and when. My command palette brief: the key chip presses at 0.6s, the palette springs open at 0.95s, four letters land between 1.35s and 2.1s and the list filters after each one, the highlight drops a row, Enter at 3.9s, a toast rises. Six lines of plain English.
3. Make time the only input.
Tell it every element is a pure function of t, from 0 to 6 seconds. No timers, no CSS keyframes, and frame 0 equals frame 6. The loop closes itself and any frame can be drawn on demand. The palette opening is a single line: k = spring(t - 0.95, 240, 18).
4. Give it colours, fonts and rules for motion.
Hex codes and font names. Mine are Claude orange #D97757, navy #0F1B2E and DM Sans. Words like clean and modern do nothing. Springs for anything that lands, eases for anything that leaves. Mix them up and it feels cheap. When you can, morph one shape into the next. In my terminal loop, a log line's highlight bar grows into a dashboard card. Same rectangle, new size.
5. Make it check itself.
"Render 8 moments across the loop side by side and fix what's wrong." That is how a black sphere and two cards stuck in one slot got caught. Point at fixes by timestamp: "at 2.0s the second row overlaps the first." Read the sheet yourself too.
6. Export a GIF that stays sharp.
Save every frame as a PNG, then run ffmpeg with palettegen stats_mode=full and paletteuse dither=none. I use 15 frames a second. One palette for the whole clip and no dithering, so flat colours stay flat. Post it as an image, not a video, and check the animation survived the upload.
The 15 in the image include a prompt bar that turns into a web page, a funnel you can watch leak, a donut that unrolls into a bar and a command palette that filters as you type. Each one is a single HTML file with no libraries.
I write about builds like this at aibyaakash.com:
aibyaakash.com?utm_source=ag-20261001
Pick one motion. Write the six lines. Ship it today.
♥ 238 · ⟲ 17 · 👁 16.0KView on X ↗
