How to make an animated line chart or graph for video

To make an animated line chart for video, copy the Stock price chart scene, give Claude your values and labels, and render it with npx hyperframes render. The line draws through your points and the number at the top ticks along with it.

The Stock price chart scene draws a line that climbs over a year with a live ticker and the gain called out in green. It works for any trend: revenue, users, temperature, followers. For parts of a whole use the Donut chart, and for one big number use the Percentage counter ring or the Odometer.

Animated graphs read best with one message per chart. Give the chart a title that says the point, such as "Users doubled in a year", and let the line prove it.

Scenes to start from

Step by step

  1. Open the Stock price chart scene and copy it

    Open Stock price chart in the Scenes Library and press Copy prompt. You get the prompt that made the scene; Copy code gives its HyperFrames code. Browsing is free, and free accounts can copy 2 scenes a day.

  2. Paste it into Claude or Claude Code

    Paste the prompt into claude.ai or the Claude app to see the scene build as a live preview. For an MP4 you need Claude Code: paste the prompt there, or set up the Scenes skill once (see Docs) and pull the scene into a folder.

    node ~/.claude/skills/scenes-library/pull.mjs stock-chart my-chart

  3. Change the words in plain English

    Give your series: "title: Members per month. Values Jan to Dec: 120, 135, 160, 158, 190, 240, 260, 300, 310, 355, 400, 460. Show the gain as +283%". Ask Claude to change the green to your brand colour if you like.

  4. Check it and render the MP4

    HyperFrames renders the MP4 on your own computer, free, as often as you like. You need Node.js installed. Check first: it reports anything off-frame or broken.

    npx hyperframes check my-chart
npx hyperframes render my-chart

Questions

How do I create an animated chart for free?

Browsing and previewing every scene is free, and free accounts copy 2 scenes a day. The render is free because HyperFrames makes the MP4 on your own computer, with no watermark on the video.

Can I make an animated pie chart?

Yes. Start from the Donut chart scene: its slices draw in one by one with names and percentages. Ask Claude to fill the centre if you want a full pie.

Can the chart have two lines?

Yes. Ask Claude Code to add a second series with its own colour and a small legend, then check the frames before rendering.

Do I need After Effects?

No. Scenes are HTML, CSS and JavaScript (HyperFrames code). Claude edits them from plain English and HyperFrames renders them to MP4. You never open a timeline.

More