Guides · · Maxwell Prehoda
Motion Design With Claude Code: 14 Real Examples and the Skills That Made Them
Claude Code makes motion design the way it makes software: it writes code that draws every frame, then renders that code to video. The code can be HTML and CSS, Canvas, GSAP, React with Remotion, HTML rendered to MP4 with HyperFrames, or Python driving Blender. The best results come from skills, packaged instructions that give Claude a pipeline (storyboard, build, render, check the frames) and a taste to follow.
Below are fourteen real examples, each credited to the person or team who made it and linked to their repo or post: six skills you can install today and six finished pieces people made in Claude Code, plus two of ours. The finished pieces come from the community entries in our Motion Prompts directory, where we record what each creator said about how they made it.
1. Remotion Agent Skills by Remotion: Best for React developers who want video as code
Platform: Remotion skills (free for individuals and small companies)
Remotion is a framework for making videos with React components, and its official agent skills teach Claude Code how to use it well. The repo lists a dozen skills: best practices, creating a project or composition, markup for animation, layout, typography and timing, launching the Studio preview, rendering, maps and route animations, captions, interactivity, docs search, upgrades and browser-based media handling.
Install with `npx skills add remotion-dev/skills`, then ask Claude for a video in plain language. Because everything is React, the same components that render your product can appear in the film, and the Studio gives you a scrubbable timeline to check Claude's work frame by frame.
Many of the finished pieces below were built on Remotion, which is a good sign of how far the skills carry you.
Watch out for: Remotion's license is free for individuals and small companies; bigger companies pay a license fee. Check the terms before you ship client or company work.
2. HyperFrames by HeyGen: Best for turning plain HTML and CSS into MP4 with an agent
Platform: Open source (Apache 2.0), Node 22+ and FFmpeg
HyperFrames describes itself as "Write HTML. Render video. Built for agents." Compositions are ordinary HTML files with data attributes for timing and tracks, and they can use GSAP, CSS, Lottie, Three.js, Anime.js or the Web Animations API with no build step. Each frame is captured in headless Chrome and encoded with FFmpeg, so the same input always renders the same video.
For Claude Code it ships as a plugin (`claude plugin marketplace add heygen-com/hyperframes`) with skills that teach the agent to plan, write, lint, preview and render. Its motion-graphics skill covers kinetic type, stat count-ups, charts, logo stings, lower thirds and maps.
If your team already thinks in web pages, this is the shortest path from Claude to a finished MP4.
Watch out for: Rendering in headless Chrome frame by frame is slow for long or high-resolution pieces. HyperFrames offers AWS Lambda rendering for that, which adds setup and cost.
3. GSAP agent skills by GreenSock: Best for interactive web motion and scroll animation
Platform: GSAP skills (MIT), GSAP itself free
GreenSock's official skills teach coding agents to write GSAP correctly. There are eight: core (easing, duration, stagger, defaults), timeline (sequencing, position parameter, labels, nesting), ScrollTrigger, plugins such as Flip, Draggable and SplitText, utils, React with `useGSAP`, performance and other frameworks.
The timeline skill is the one that changes results most. Without it, agents tend to chain tweens with delays; with it, Claude builds one timeline with labels and relative positions, so you can retime a whole sequence by moving one label.
Use this when the motion lives on a website rather than in a video file: hero sequences, scroll stories, product tours.
Watch out for: Skills improve the code, not the taste. Pair the GSAP skills with a clear brief for timing and easing, or you get technically clean motion that still runs too long.
4. Product Launch Video workflow by Every: Best for 15 to 30 second product launch videos
Platform: Claude Code skill plus Remotion scaffold
Every's skill is a good example of encoding a creative process, not just an API. It gathers the brief, brand tokens and a screen recording, writes a shot-list storyboard before any code, builds the scenes in Remotion, renders and audits, then sends the cut to four parallel critic agents for design, readability, pacing and brand consistency. The output is an MP4, an optional GIF and social copy.
The rules in our listing are worth stealing even if you never install it: storyboard first, real UI copy only, and the product on screen within three seconds.
Renders default to 1920 by 1080 at 30 fps, so the result is ready for a landing page or a launch post.
Watch out for: Critic agents catch obvious problems but they are not your audience. Watch the cut yourself at full speed, with sound, before it goes out.
5. Apple-Style Kinetic Recap by Damir: Best for keynote-style recap and feature videos
Platform: Claude skill for Remotion, open source
Damir's skill is the most rigorous example here. Instead of asking Claude to "make it look like Apple", he measured six Apple recap videos, about 1,107 seconds and 33,187 frames: shot lengths and transition types, on-screen text size, position and hold, spring and Bezier fits for every entrance and exit, camera moves from optical flow, colour, and audio down to BPM and loudness.
The results become the defaults. The README reports a median shot of about 56.5 frames and a text hold of about 33 frames, and notes that the fitted springs ran about 19 percent too fast and had to be recalibrated from test renders.
It is the clearest proof that the way to get a specific style from Claude Code is to give it numbers, not adjectives.
Watch out for: Measured defaults make one style excellent and others harder. Use it for that Apple recap look; start from a general skill for anything else.
6. Blender Claymation by AP: Best for stop-motion clay films from a single prompt
Platform: Claude skill, Blender 4.2+ and ffmpeg
Claude Code is not limited to the browser. AP's skill has Claude plan a beat sheet, build a tabletop miniature and a clay puppet in Python, animate it, render with Cycles, check the frames and output an MP4. The repo includes two example films.
The look comes from specific rules: animated on twos at 12 fps, hand-made boil and light flicker for the clay feel, then encoded at 24 fps with grain and vignette. A look guide in the repo holds the numbers behind it.
Install by cloning the repo into `~/.claude/skills/blender-claymation`; Blender runs headless through a script, so you never open the app.
Watch out for: Cycles renders are slow without a GPU, and a few seconds of film is many frames. Start with a very short shot to check the look before asking for a full piece.
7. Negroni Cocktail Recipe Explainer by Rory Flynn: Best for short explainers from one reference image
Platform: HTML/CSS, made in Claude Code
A 30-second explainer that fills an empty glass step by step, labelling each Negroni ingredient and measurement as it pours in. According to the creator's post, it was generated as HTML in Claude Code from a single recipe image.
It shows how little input a good explainer needs when the structure is obvious: a recipe already has steps, quantities and an order. Claude turned that into a sequence of reveals with a clear payoff.
The same idea works for onboarding steps, pricing breakdowns or any process with a fixed order. Our directory also has a White Russian version by another creator, in the same format.
Watch out for: Explainers built from an image inherit its mistakes. Check every number and label the model reads off the source before you publish.
8. Four Seasons Train Window by Ole Lehmann: Best for atmospheric short films with no footage
Platform: Code-drawn frames, made in Claude Code
A 30-second animated film of the four seasons passing outside a cozy train carriage window, coffee on the table, in a Grand Budapest Hotel look. Per the creator's post, Claude Code drew every frame from code shapes and synthesized the soundtrack.
It is a useful counterexample to the idea that Claude Code only makes product promos. A fixed camera, a window frame and a slow change of season is a brief that suits code well: the composition stays put and the motion is all in colour, weather and light.
Pick this kind of brief when you want mood rather than information, such as a channel ident, a holiday card or a background loop.
Watch out for: Referencing a film's look is fine for a personal piece; for commercial work, describe the qualities you want (symmetry, pastel palette, flat staging) rather than naming the film.
9. Alan AI Brand Promo by Prasad Pilla: Best for on-brand promos without a design handoff
Platform: Code-rendered at 1080p and 60 fps, made in Claude Code
A 15-second promo for Alan AI. According to the creator, Claude read the site, took the palette and type stack from its CSS, rebuilt the logo from the favicon pixels, then rendered every frame in code. The team added the music.
This is the move that makes Claude Code different from a video generator: it can read your actual brand from your actual code. Pointing it at the site or the repo gets you the real colours and fonts instead of a guess.
If you have a design system, give it the tokens file directly. If you only have a website, this example shows that is often enough.
Watch out for: A logo rebuilt from favicon pixels is an approximation. For anything official, give Claude the real SVG.
10. Voice Agent SaaS Launch by Rafael: Best for launch videos that reuse your real UI components
Platform: Made in Claude Code inside the product repo
A launch video for a voice agent SaaS that reuses the product's real frontend components and charts. The creator says it was made in Claude Code inside the repo, with two downloaded reference videos for style.
Running Claude Code in the product repository is the strongest version of the brand trick above. The film shows the actual interface, not a mockup, and when the UI changes you can regenerate the video from the new components.
Reference videos are the other lesson: showing Claude two examples of the pacing you want beats describing it.
Watch out for: Real components bring real data. Make sure no customer names, keys or internal numbers appear on screen; seed the components with demo data first.
11. Session Story Animated Film by Jake Moran: Best for personal, story-driven films about how you work
Platform: Claude Code skill built on HyperFrames
A Claude Code skill that reads your local session history, picks a typical session and animates it as a watercolor short of Claude at a desk, using your real messages and an original score. It is built on HyperFrames, so the output is a rendered video.
It is a playful idea with a serious point: Claude Code has context no video tool has, your files, your history, your project. Motion that uses that context feels personal in a way a template never will.
The same approach could turn a changelog into a release film or a commit history into a year-in-review.
Watch out for: Session history can contain private details. Read the messages it picked before sharing the film anywhere.
12. 3D Sales Ranking Tower by Dilum Sanjaya: Best for data-driven 3D charts for social video
Platform: Remotion with React Three Fiber, made in Claude Code
A 3D data visualisation tower in Remotion with React Three Fiber: one box per best-selling game, height by copies sold, and a camera that climbs from rank 20 to rank 1, pausing on each.
Data animation is where code beats keyframing by hand. The data drives the geometry, so changing the dataset rebuilds the film, and the camera path is a function of rank rather than twenty hand-placed moves.
Ranking countdowns like this are a staple format for short-form video, and this one shows Claude Code can take them into 3D.
Watch out for: Check the data source. A beautiful chart of wrong numbers spreads faster than a correction does.
13. Motions for Claude Code: Best for dropping tested CSS motion into a real project
Platform: Motions Pro plan, connects to Claude Code Ours
Not every motion job is a film. Most are a loader, a hover state or a text reveal inside an app. Motions for Claude Code connects Claude Code to our whole catalog, so instead of writing an animation from scratch it can search our CSS snippets and motion prompts and put the real code into your project.
Three tools do the work: `search_motions` finds animations by description, `get_snippet` returns the HTML and CSS, reduced-motion guard included, plus a Tailwind version where there is one, and `get_motion_prompt` returns the prompts behind the motion films on our inspiration board, credited to their creators.
The film below is one of ours, a terminal launch sting from our studio prompts, the kind of piece you can ask Claude Code to remake for your own CLI.
Watch out for: It gives Claude tested building blocks, not taste. You still decide where motion belongs; our guide to web animation best practices helps.
14. Our studio prompts: styles you can paste into Claude Code: Best for a specific visual style without writing the brief
Platform: Motion Prompts directory, free, CC0 prompts with videos Ours
Alongside the community entries, our Motion Prompts directory holds our own CC0 style prompts, each with a rendered video so you can see the result before you use it. They describe a style precisely: palette, type, motion rules, timing.
Paste one into Claude Code with one of the skills above and you get that style applied to your subject. The AI Agent Fleet below, a wall of 24 live coding-agent panes on warm paper, is one of them.
If you would rather not set up a pipeline at all, our Animation Studio does the drawing, choreography and frame checks for you and exports to HTML, React, MP4 or GIF.
Watch out for: A style prompt is a starting point. Swap in your own colours and copy, or every film made from it will look the same.
How to choose your Claude Code motion setup
Three questions decide which of the examples above to copy.
Match it to the output
A video file for a launch or social post: Remotion skills, HyperFrames, or a workflow skill built on them like Every's or Damir's. Motion that lives on a website: GSAP skills, or CSS snippets through Motions for Claude Code. A 3D or stop-motion film: the Blender Claymation skill. Data storytelling: Remotion with React Three Fiber, as in the ranking tower.
Match it to what Claude can read
The strongest pieces above all gave Claude real material: the site's CSS (Alan AI), the product repo and its components (the voice agent launch), a recipe image (the Negroni explainer), session history (Session Story). Run Claude Code where that material lives, and point it at reference videos for pacing.
Match it to how much control you want
Want a one-line prompt and a surprise: stock Claude Code at high effort, as many creators in our directory did. Want a repeatable house style: a skill with measured defaults, like Apple-Style Kinetic Recap. Want to scrub, tune eases and box parts to change without editing code: our Studio.
Make your first Claude Code film this week
Install one skill, Remotion's or HyperFrames', open Claude Code in your product repo and ask for a 15-second launch clip that uses your real UI. Give it a storyboard of four beats and two reference videos. Render, watch at full speed, and refine with notes on timing rather than adjectives.
For more ideas, browse the credited pieces in our Motion Prompts directory and the inspiration board, motion made for you and Claude. Or build the scene visually in our Studio.
Make a 15-second, 1920x1080 launch clip for the product in this repo. Beats: hook line (0 to 2 s), the main screen built from our real components (2 to 9 s), one feature close-up with a cursor click (9 to 13 s), logo and URL (13 to 15 s). Use our brand tokens, ease-out on entrances, no bounce, cuts on the beat at 120 BPM. Check every frame for clipped text before rendering.
Common questions
Can Claude Code make animations and videos?
Yes. Claude Code writes code that draws each frame, such as HTML and CSS, Canvas, GSAP, React with Remotion or Python for Blender, and renders it to video with tools like Remotion, HyperFrames or ffmpeg. Skills such as Remotion's and HeyGen's HyperFrames give it a tested pipeline.
What is the best Claude Code skill for motion graphics?
It depends on the output. Remotion's official skills suit React developers making videos, HyperFrames suits teams who think in HTML and want MP4 out, GSAP's skills suit interactive website motion, and workflow skills like Every's Product Launch Video add storyboarding and critic passes on top.
Is Remotion free to use with Claude Code?
Remotion says it is completely free for individuals and small companies, and bigger companies pay a license fee. The agent skills themselves are in a public GitHub repo. Check Remotion's license page for the current terms.
How do I get consistent style from Claude Code animations?
Give it numbers and references rather than adjectives: brand tokens, timing, easing, shot lengths and a couple of reference videos. Skills with measured defaults, like Apple-Style Kinetic Recap, and style prompts like the CC0 ones in our Motion Prompts directory, make the style repeatable.