Free Guide: Animate Anything with Claude

One idea, three styles

Same brief, "a hummingbird hovering at a flower", with three different style references. No video model and no stock footage. Claude drew every frame in code.

jungle gouache

paper-cut sunset

neon night

What you need

💻Claude CodeIn the Claude app (Code tab) or the terminal. It comes with a paid Claude plan (Pro or Max).

🟢Node.js 22+ and FFmpegHyperFrames needs both to render the video. The setup prompt below checks them for you.

🖼️1–3 images of a style you loveAn illustration, a frame from a film, a Pinterest pin.

The steps

Same order as the reel. The first time takes about 10 minutes of setup.

Find a style you love

Pinterest, a film, an illustration

Search for a look you like and save 1–3 images. In the reel I searched Pinterest for "hummingbird gouache illustration" and saved one pin.

Reel frame: saving the style reference on Pinterest

💡Pick a clear style. Bold shapes, a small palette and visible texture are easy to rebuild in code. Use the images as inspiration: Claude redraws the style, it never copies the image.

Install the skill (once)

Download + one setup prompt

⬇animate-skill.zipThe /animate skill: SKILL.md + a README. Save it to your Downloads folder.

Open Claude Code and paste this. Claude checks your tools, installs HyperFrames (the open-source video renderer) and puts the skill in the right place.

Setup promptSet up the /animate skill for me: 1. Check that Node.js 22 or newer and FFmpeg are installed. If not, install them. 2. Install HyperFrames: run `claude plugin marketplace add heygen-com/hyperframes` and then `claude plugin install hyperframes@hyperframes`. 3. Unzip ~/Downloads/animate-skill.zip into ~/.claude/skills/ so that ~/.claude/skills/animate/SKILL.md exists. Then tell me when to restart Claude Code.

Prefer doing it yourself? These are the same steps:

Terminalclaude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes mkdir -p ~/.claude/skills && unzip ~/Downloads/animate-skill.zip -d ~/.claude/skills/

Set up the session

Opus 5.5 · your references · effort high

Start a new Claude Code session in an empty folder.
Pick Opus 5.5 in the model picker.
Attach your style images (drag them into the chat or use +).
Set effort to High or above.

Reel frame: the references attached in Claude Code

Load the skill and give it a brief

Topic + length + format

Type /animate, pick the skill, then add your topic or story, the length and the aspect ratio. A rough idea is enough.

The brief from the reel/animate Story/Topic: a cool explainer video on how a hummingbird hovers 15 sec, 9:16

Let it work

Our run took about 16 minutes

ResearchesChecks the facts and keeps the sources

Builds every shotStyle guide + shot list, then code

Renders the framesHyperFrames turns the code into video

Makes the soundMusic written in code

Checks its own workLooks at stills and fixes what's off

Exports an MP4Ready to post, in your folder

💡Give feedback like you would to an editor. "Slower when the pond opens", "follow one fish with the camera", "no text cards". Claude changes the code and re-renders. You never start over.

More briefs to try

Kids' story/animate Story: a tiny paper rocket that dreams of touching the moon, told in 6 shots with a happy ending 30 sec, 16:9, warm felt-and-paper style like my reference

Product ad/animate Topic: a launch ad for my app [name + one line about what it does]. Show the problem, the app solving it, and end on the logo 20 sec, 9:16, clean and premium, in the style of my reference

Explainer/animate Topic: how bees tell each other where the flowers are (the waggle dance). Verify the facts and keep the sources 15 sec, 9:16, vintage science-plate style

Motion graphic/animate Topic: my channel hit 10,000 followers. Big number count-up, my brand colours, a confetti burst 8 sec, 1:1

Good to know

🎨Inspired by, not copiedYour references guide the look. Don't ask Claude to trace someone's artwork, and credit the artist when you share.

✅Check the factsFor explainers, the skill keeps its sources in RESEARCH.md. Read them before you post.

⏳Longer = slowerStart with 10–15 seconds. Renders of rich, textured styles take longer.

🔁Everything is editableThe video is a project folder of code. Any change is one instruction and a re-render.

If something looks off

/animate doesn't show up	Check that `~/.claude/skills/animate/SKILL.md` exists, then restart Claude Code.
"node" or "ffmpeg" not found	Install Node.js 22+ (nodejs.org) and FFmpeg, or ask Claude to install them for you.
HyperFrames commands fail	Update Claude Code, then run the two `claude plugin` commands again in a terminal.
The style doesn't match	Attach 2–3 clearer references and say what to keep: "the flat leaves, the red flower, the grain".

🙌Credit: HyperFrames by HeyGen (open source, Apache 2.0). Style reference in the reel: a Pinterest pin by YASMIN, used as inspiration only. Claude by Anthropic.

This is what I do. Check out my work.

I make content, websites and AI tools for brands, with the same kind of AI tools you just saw.

See my portfolio →

Got a project in mind? paulino@trigonagency.com