Animated timeline videos with Claude Code

ReelStyles · 12 November 2026

Yes, Claude Code can make an animated timeline video. "The phone from 1980 to today", "every empire on one map", "the 10 biggest companies since 1900": Claude writes the scenes as HTML, SVG or WebGL from your list of dates, and HyperFrames renders the MP4 on your computer. No video model is involved, so every year and every number on screen is exactly what you gave it.

Here are four looks from the kits, each one a clip made with its kit:

Below are the rules of the look, the steps, a prompt to paste and the styles that fit. If this is your first film in code, read how to make animated videos with Claude Code first.

What makes the look

Give Claude these rules before it draws anything.

A year counter the viewer can always see. It sits in the same corner the whole film and rolls like an odometer, so people know where they are in time without reading.

Data first. Put the years and values in a plain table (a CSV works) and ask Claude to read it. It never types a number by hand, so a fixed date in the table fixes the film.

Steady time, longer stops. Years tick past at an even pace, then the film slows at the moments that matter: a crash, a new invention, a border change. One short label per stop.

One thing changes at a time. A chair turns into its next version, a border grows, a bar overtakes another. If three things move at once, the viewer misses all three.

Steps with Claude Code

1. Write the data and plan

Here is timeline.csv with year, name and one-line note for 12 versions
of the telephone. Plan a 60-second timeline video in 16:9. Slow down
on 4 stops: 1876, 1983, 2007, 2024. Show me the plan before you code.

Check every date in the table against a source you trust before you build.

2. Build and look at stills

npx hyperframes lint .
npx hyperframes snapshot . --at 1,15,30,45,59 -o snapshots

Check that the counter shows the right year on each still and that labels don't cover the object.

3. Render

npx hyperframes render . -o out.mp4 --quality looks --workers 2

Run --quality draft first if you only want to see the pacing.

A prompt to paste

Make a 60-second animated timeline in 16:9 (1920 x 1080) from
timeline.csv (columns: year, name, note). The camera glides along a
ribbon of years. At each row the object changes into its next version
and the year counter rolls on. Slow down on the rows marked "stop".
Read every year and name from the CSV, never type them. Plan first,
then show me stills of the first two stops before you build the rest.

Which styles fit

A style kit has the rules written down, along with templates and a checklist Claude grades its own stills against. Of my 126 styles, these suit timelines and then-vs-now videos:

For history documentaries around a timeline, see the ukiyo-e guide and use cases.

What this method cannot do

It shows your data as it is. Claude can help you find sources, but check the table yourself: a wrong year looks just as sure of itself on screen as a right one. It also draws maps and objects in a flat or 3D style, not satellite photos or archive footage.

Get the kits

You can try 7 styles for free first from reelstyles-free on GitHub. All styles come in one ReelStyles purchase.

Questions

Can I use real data, like GDP or population?

Yes. Download the numbers as a CSV from a public source (World Bank, Our World in Data) and give Claude the file. Name the source in your video description.

Can it be a vertical Short?

Yes, but the timeline kits above are tested in 16:9. Ask for 9:16 (1080 x 1920) in the prompt and check the stills closely: a bar race needs fewer bars to stay readable on a phone. Keep the counter and labels inside the safe area; the numbers are in my Shorts guide.

Is this a video model?

No. The film is HTML, SVG and WebGL that HyperFrames renders frame by frame.

Sources

HyperFrames on GitHub (Apache-2.0). Commands come from my animated videos guide.

See all 126 styles and the price