Motion guide
Motion graphics with Claude Code: kinetic type, stats, UI
Set up HyperFrames or Remotion, prompt Claude Code in timed beats, name the easing for each move, render the MP4 and check single frames before you post. Try three easings on the same words here.
Same words, different ease.
gsap.from(".word", { y: 40, opacity: 0, duration: 0.9, stagger: 0.06, ease: "power3.out" })Set up
You need Claude Code and one of two free renderers: HyperFrames, which builds video from HTML and CSS, or Remotion, which uses React. The Windows setup for both is in our Claude Motion alternative guide.
Prompt in beats, not adjectives
“Make it dynamic” gives Claude nothing to measure. Give it the size, the frame rate and a beat sheet: what happens, from when to when, and how it moves.
Make a 6-second vertical video, 1080x1920, 30 fps, in HyperFrames.
Beat 1, 0.0 to 1.0 s: the word "Before" drops in from above, power3.out.
Beat 2, 1.0 to 2.5 s: a bar grows from 0 to 70% width, power2.inOut.
Beat 3, 2.5 to 4.0 s: the number counts from 0 to 38, linear.
Beat 4, 4.0 to 6.0 s: "After" pops in, back.out(1.7), then holds.
One accent colour on a dark background. No gradients, no drop shadows.Here is a six-second piece made in code with Claude:
Pick the easing for each move
Easing is how a move speeds up and slows down, and it decides whether the move feels heavy, snappy or mechanical. Three cover most work:
linear: the same speed all the way. Right for a counter or a progress bar, wrong for almost anything that enters the frame.power3.out: a fast start and a soft landing. The default for anything that arrives.back.out(1.7): overshoots a little, then settles. Good for a pop, a button or a final word.
The names come from GSAP. Claude knows them, and can match the same curves in HyperFrames or Remotion.
Render, then check the frames
Render the MP4, then pull single frames at the moments that matter, such as the middle of each beat. Put your file’s name in place of out.mp4:
ffmpeg -ss 2.5 -i out.mp4 -frames:v 1 check.pngLook for text cut off at the edges, elements colliding mid-move, and a last frame that is not still. A video that ends mid-move looks broken when it loops.
Common fixes
- It feels rushed: add holds. Let each beat sit still for a moment before the next one starts.
- Text is cut off on a phone: keep text away from the edges, where apps put their buttons and captions.
- Colours look washed out after upload: ask Claude to render with the yuv420p pixel format and BT.709 colour.
- The motion stutters: make the frame rate in the project match the render, such as 30 fps in both.
Questions
Can Claude Code make motion graphics?
Yes. Claude Code writes the animation as code in HyperFrames or Remotion, and the renderer turns it into an MP4 on your PC.
Do I need After Effects?
No. The renderer turns the code into video, so you need Claude Code, Node and, for HyperFrames, FFmpeg.
What is an easing?
An easing is the speed curve of a move: how it starts, speeds up and slows down. Naming one, such as power3.out, tells Claude exactly how a move should feel.
How do I check a render?
Pull single frames with FFmpeg at the key moments and look for cut-off text, collisions and a last frame that is not still. Then watch it once on a phone.