chase-animations

42 finished animations, a one-sentence explainer maker and effects for your own shot, for vertical video.
Three Claude Code skills. Tell Claude what to show, and it lands on the word you say.

Watch the gallery  ·  /animate  ·  /explain  ·  /vfx  ·  Start here  ·  Commands

Three skills

All three are installed together, run on your own computer, and are checked frame by frame before you get the file.

/animate: one animation, on your word

/animate head-to-head on the word "cheaper" in my-video.mp4, Cursor vs Claude Code

1. Pick an animation. Name one, or describe what you need and Claude suggests some. Each one also has its own shortcut, such as /animate-iceberg or /animate-route-map.
2. Give it your content. Claude asks for anything missing: your words, numbers and colours. It never invents a statistic.
3. It lands on your word. The pack transcribes your video on your own computer and times the animation's key moment to the word you pick, then places it into your video with your audio untouched. No video? You get a clip for your editor.
4. It checks the result. Claude looks at the key frames before handing it over.

• It isn't a prompt you hope comes out right. Each animation is a tested HyperFrames block with text, numbers and colours you can edit.
• It works with real data. Route map draws real trips on real streets from two place names or a GPX file, and Campaign map sweeps arrows across real places, with no API key.

One animation, three outputs

full 1080x1920, a full-screen cutaway

top 1080x960, the top half of a split-screen, with you below

overlay 1080x1920 and transparent, floating over you

/explain: a whole explainer from one sentence

/explain how AI picks its next word Claude writes the script. About 50 words, fact-checked, split into scenes, with the facts it relies on listed so you can check them. You approve it. Ask for changes until it reads right. Nothing gets built until you say it's good. Preview it, if you like. A silent version timed to a natural reading pace, so you see the video before you record. You record it. One take on your phone or mic, in your own voice. A slip or a restart is fine. There's never a robot voice. It builds to your voice. Your take is transcribed on your computer, and every scene and caption is timed to your actual speech. Captions land a few words at a time, with the key word boxed. You get the video. A finished vertical MP4 with your narration, checked frame by frame.

The scenes come from a kit of reusable cinematic 3D scene types, so every explainer looks consistent and builds quickly: a hero object, a labelled layer stack, things flowing between parts, a model network, a face scan, a fiber strand, ranked bars, a big number and more. When nothing fits, Claude writes a custom scene from a template.

These five were made with /explain, shown as silent previews:

How AI picks its next word Your sentence becomes tokens and the likeliest next word wins	How AI learns from data Guesses flash red, the error flows back and accuracy climbs	How face unlock works Infrared dots map a face in 3D and a padlock opens	How solar panels make power Photons knock electrons loose and current lights a bulb
How fiber internet carries light A light pulse zig-zags down glass at 200,000 km a second

/vfx: effects on your own shot

/vfx orbit on "five skills" in my-video.mp4 Pick an effect and a moment. Name the word, a stretch of seconds, or a rule for the whole video, like "every time I name a skill, drop it into the tier list". Claude finds the word. Your video is transcribed on your computer, so the effect lands on what you actually said. You're cut out of your own shot. Only for the few seconds the effect covers. That's what lets things sit behind your head and lets the room go dark while you stay lit. It's built around you. A layer behind you, your cut-out, a layer in front, all following your head with a little weight. It checks the result. Claude looks at the key frames, so nothing covers your face.

Every effect uses your real words and numbers. These sixteen were made on one 85 second video, which is in examples/vfx/ with a 15 second sample clip to try it on:

Glass widgets Frosted cards drop in around your head; the upper ones fall behind it	Orbit Your cards circle your head, sliding behind it on the far side	Snap A hard punch-in on your face on one word	Push A slow push-in while the room behind you goes soft and you stay sharp
Tier list A tier board above you; each thing you name slams into its row	Chart split A bar chart above you; the bars you compare shoot out at their real value	Checklist A Claude Code task card ticks each item green as you say it	Spotlight The room drops to black and a glowing word buzzes on behind your head
Browser stack Browser windows pile up behind you, then each one gets a green Passed	Backdrop Any animation from the pack becomes the room behind you	Echo Your keywords land huge behind your head the moment you say them	Strike A giant word behind you gets crossed out, then the right word drops in
Pinned comment The comment you're answering pins beside your head and types itself out	Pings Notifications stack around you as you list the problems	Freeze and mark The frame freezes, the room goes black and white, and marker circles you	B-roll split A website or screenshot above you; you in the card below

The cut-out is picked for your computer. npm run setup -- --vfx checks your machine and asks before downloading anything. With an NVIDIA card it installs Robust Video Matting from its own GitHub (best edges, fast, about 2.5 GB; RVM is GPL-3.0, so it lives on your machine, not in this pack). On a Mac or any other computer it uses HyperFrames' own remover (Apache-2.0, about 170 MB, slower).

The animations

Every clip here is a real render on sample content. For larger versions with each key moment and the command that runs it, open the gallery.

Real routes

Route map on real streets, water and 3D buildings. Name two places or give it a GPX file.

Tower Bridge to St Paul's A 1.4 mile walk through real London

Millennium Park to Navy Pier A 1.8 mile drive along the Chicago lakefront

Palace of Fine Arts to the Wharf A 2.2 mile bike ride along the San Francisco bay

Big visuals

Spectacle that works for any topic. Each one turns an idea into something physical you can look at.

iceberg A small tip hides a colossal mass under the waterline

scale-reveal A big number rises past real things at true scale

cutaway A blade of light slices an object open down to its core

campaign-map Bold arrows sweep across a real map, like a history documentary

Compare and prove

head-to-head Two options compared row by row, ending on one payoff stat	before-after A handle wipes a website from its old design to its new one	ranking-bars Bars race through changing years with one hero to follow	money-stat One huge counter climbs a chart past its turning point
notification-stack Orders flood a lock screen while the total counts up	post-receipt A social post with racing counts and quote replies	headline-highlight A newspaper flies in and a highlighter marks the evidence	evidence-desk Papers on a desk with a figure circled in red
day-card A huge day counter stamps through a calendar

Products and apps

screen-zoom The cursor leads the camera to one button, and it clicks	app-launch A studio phone receives a transaction and completes it	laptop-reveal A laptop opens, wakes on your product and scrolls it	apple-one-take A dot morphs through a button, a planner and a phone in one take
frosted-glass A glass search bar docks above results and picks one	exploded-teardown A product opens into labelled layers

Explain a process or place

isometric-flow A 3D diorama of a three-step process	timeline-3d A moving rail passes oversized milestone cards	globe-arcs Routes cross a dotted globe while a figure counts up	route-map A route draws through a pale 3D city, fictional or real, with live trip stats
pencil-blueprint A graphite sketch becomes a white-on-blue technical drawing

Styled titles

blue-editorial An ultramarine cover with frame-filling italic words	swiss-grid A black circle and red field in a strict Swiss grid	magazine-layout A painted image, a serif headline and a real text column	risograph A two-ink poster prints in stepped passes
ink-wash Mountains, a red sun and a small boat on rice paper	glow-orb A soft breathing orb above one line of type	retro-crt A beam opens into a huge phosphor title with a terminal line	oscilloscope A green signal folds through figures and writes your words

Claude Code

These use Claude Code's look, the Claude logo and its pixel mascot. They run on sample content until you tell Claude what to show, and you can turn the mascot or logo off.

terminal-run A session plays out from one prompt to a finished result	agent-fan-out One prompt splits into six subagents, each with its own mascot	agent-loop The mascot laps Plan, Act and Check until the tests pass	test-sweep A wall of failing tests flips green in a wave
bug-hunt The mascot surfs a scrolling file until it finds the bug	file-tree A codebase grows branch by branch behind the mascot	diff-reveal The mascot eats the red lines of a real-looking diff	hours-collapse A full day of hour blocks gets stomped into minutes
cost-receipt A till receipt prints line items for a session	benchmark-takeover The mascot rides a huge row into a serious leaderboard

Start here

You need Claude Code, Node.js 22 or newer and FFmpeg.

git clone https://github.com/ctskool/chase-animations.git

cd chase-animations

npm install

npm run setup

Restart Claude Code and type /animate, /explain or /vfx. To land animations on a spoken word, and for /explain and /vfx, also add the speech model, about 640 MB, which runs on your computer:

npm run setup -- --speech

For /vfx, also add the cut-out model picked for your computer. It tells you what it will download first:

npm run setup -- --vfx

docs/INSTALL.md has the full guide and fixes for common problems. Prefer the terminal? docs/COMMANDS.md has every command.

How it's built

flowchart LR
  animate["/animate or a shortcut"] --> block["A tested block with your content"]
  block --> render["HyperFrames render"]
  explain["/explain"] --> script["A script you approve"]
  script --> voice["Your recording"]
  voice --> scenes["Scenes from the kit, timed to your words"]
  scenes --> render
  vfx["/vfx"] --> cut["You, cut out of your own shot"]
  cut --> layers["Layers behind and in front of you"]
  layers --> render
  render --> video["Your video"]

All three skills share one engine: the same HyperFrames rendering, the same on-device transcription and the same frame check.

• /animate works from a library of finished animations, called blocks. Each block is one tested animation with variables for your content. Each block also has a typed shortcut, such as /animate-cutaway, that runs the main skill for that block, so a fix lives in one place.
• /explain works from a kit of scene types rather than finished blocks, because a whole explainer needs many short scenes that change with every topic. Claude picks scenes from the kit, fills them in for your topic, and times each one to your recording.
• /vfx works from effects, built like blocks but drawn in two layers, one behind you and one in front. Your cut-out goes between them, and a head track taken from the cut-out lets each layer follow you.

What works where

Credits

Fonts, map data and third-party licences are listed in docs/CREDITS.md. Claude, Claude Code, the Claude logo and the Claude Code mascot are Anthropic's, and this pack isn't affiliated with or endorsed by Anthropic.