Claude animation: four ways to get motion out of Claude

People who search for “Claude animation” usually want one of two things: an animated section on their website, or a short animated video. Claude can do both, in different places. This page sorts the routes by what you get at the end, then covers the prompting and the checks that keep an animation from looking broken halfway through.

Choose by what you need at the end

Claude Code animation in the page: CSS, GSAP and three.js

Most website motion is ordinary front-end code, which Claude Code writes like any other. The question is which layer to ask for, because each one costs more weight and more checking than the last.

• CSS transitions and keyframes for hover states, entrances and simple loops. No library, nothing to load.
• GSAP for timelines and scroll-driven sequences, where several things move in order. GSAP’s licensing page says it is free, including commercial use, and that the plugins that used to be for members only, such as ScrollTrigger and SplitText, are included.
• three.js or raw WebGL for 3D scenes, particles and shaders. This is where heroes get their depth, and where performance and fallbacks matter most.

A prompt that names the trigger, the timing and the fallback gets a usable first draft far more often than “make it animated”:

Animate the hero on load: the headline rises 24px and fades in over 600ms with ease-out, then the two buttons follow 120ms apart. Use CSS only. Under prefers-reduced-motion, show the final state with no movement. Don't animate width, height or top.

For a whole animated hero, writing every scene from a blank page takes many rounds. A skill skips that: it ships the design, the motion and the checks, and your agent fills in your words. Each of Lookbk’s Motion Heroes gives you a one-file page, a paste-in embed, a still picture for when WebGL is off, and a 1080p video of the hero for posts. These six are free:

Free

web

Washing Line HeroClaude CodeCodexCursor+3 more agents

Free

web

Parallax DepthClaude CodeCodexCursor+3 more agents

Free

web

Falling LeavesClaude CodeCodexCursor+3 more agents

Free

web

Aperture RevealClaude CodeCodexCursor+3 more agents

Free

web

Signal GlitchClaude CodeCodexCursor+3 more agents

Free

web

Laser EtchClaude CodeCodexCursor+3 more agents

For more, with a rendered preview of each, see the best website hero animations for Claude Code, three.js hero sections and animated website examples. To build a whole page around one, see Build a landing page with Claude Code.

Animated video from Claude Code, rendered from HTML

When you need a file rather than a live page, the same kind of code becomes a video. HyperFrames, an open-source renderer under the Apache 2.0 license, “seeks each frame in headless Chrome and encodes the result with FFmpeg”, so the same input gives the same MP4. Its README lists GSAP, CSS, Lottie, Three.js, Anime.js and the Web Animations API as animation sources, and it needs Node.js 22 or newer and FFmpeg.

The HyperFrames tutorial walks through a composition from scratch, and How to make videos with Claude Code covers the setup and the usual fixes. The quickest start is a free video skill:

1. 1

   Step 1: Install Kinetic Title Drop

   Kinetic Title Drop is free and renders a six-second 1080p title from three short lines. Paste the install prompt from its page into your agent, or run:

   TerminalCopy Terminal

   curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop

2. 2

   Step 2: Ask for the clip

   Claude CodeCopy Claude Code

   Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.

3. 3

   Step 3: Turn it into a GIF if you need one

   FFmpeg’s documentation makes a GIF in two passes: palettegen builds a 256-colour palette from the video, and paletteuse encodes the GIF with it.

   TerminalCopy Terminal

   ffmpeg -i title.mp4 -vf palettegen palette.png
   ffmpeg -i title.mp4 -i palette.png -lavfi paletteuse title.gif

Pixel Quest Promo is also free: a 20-second 8-bit promo that plays like a platform game. For a vertical clip, App Preview Film renders a 25-second 1080×1920 preview of a mobile app. More picks are on the best motion design skills for Claude Code.

Claude Motion and Claude Design in the Claude app

Claude Motion is a template in Claude for short animations. Anthropic’s help article, dated 8 October 2026, says Claude builds each one “as code that animates the text, charts, shapes, and images in it”, that it “doesn’t use a video generation model”, and that it is in beta on Team and Enterprise plans. You export it as an MP4. Claude Motion: what it makes and which plans have it covers the plans, the admin setting and its limits.

Claude Design makes “designs, interactive prototypes, one-pagers, and other visual work”, on every plan from Free to Enterprise, and you can reach it from Claude Code with /design. Its help article lists exports as .zip, PDF, PPTX, Google Slides and standalone HTML, and doesn’t describe animation or video features. If a prototype needs motion in it, ask for it in the design, then check it in the standalone HTML; if you need an MP4, use Claude Motion or a renderer.

Lottie and SVG for icons, illustrations and diagrams

Lottie is a format for vector animation. The lottie-web player, MIT-licensed, plays After Effects animations exported as JSON with the Bodymovin plugin, and draws them as SVG, canvas or HTML. It fits when a designer already made the animation: Claude Code’s part is to load the file, size it, and wire play, pause and loop to the page.

For simpler motion, inline SVG animated with CSS is enough: a line that draws itself, a pulsing dot, an arrow that moves along a path. It stays sharp at any size and needs no library. Blueprint Architecture Diagram, a free skill, uses this idea for system diagrams: it reads your repo and draws an animated HTML diagram with moving data-flow dots, plus a still SVG and a PNG.

Prompting Claude for animation

• Name the trigger: on load, on scroll into view, on hover, pinned to scroll, or a loop.
• Give numbers: duration in milliseconds, delay between items, distance in pixels, easing.
• Say what stays still: the headline, the buttons, the logo. Motion reads better against things that don’t move.
• Describe the end state, not only the movement. It is what people see most of the time, and what reduced motion should show.
• Set a budget: no library, or GSAP only, or one WebGL canvas. Otherwise an agent may reach for more than the effect needs.

Check it before you ship it

.hero-title { animation: rise 600ms ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-title { animation: none; }
}

• The animation stutters on scroll

  Ask Claude to move it to transform and opacity, and to drop any animated top, left, width or height.

• Text pops in, then jumps when the font loads

  Start the animation after the web fonts are ready (document.fonts.ready), or preload the font.

• The rendered MP4 shows a half-finished frame

  The animation isn’t seekable: a renderer steps through time, so the motion has to be on a timeline it can seek, not driven by timers. Check your renderer’s docs for what it supports.

• The GIF has banding or the wrong colours

  Make the palette from the same video first with palettegen, then encode with paletteuse, as in the steps above.

For every way Claude can make a video, including what it can’t, see Can Claude make videos?