Animated charts and counters

To make an animated chart or count-up for a Reel, start from a data template, set its variables to your own numbers and render. "Use t09. Count to 12,480 and label it NEW MEMBERS. Render." is a complete prompt: Claude Code changes the variables, checks the video and renders a 1080 x 1920 MP4 in which the number counts up and the chart draws itself.

One rule matters more than any animation: use your own real numbers, never invented ones.

Pick the chart that fits the number

In short: one number, t09 or t39. Several things compared, t10 or t15. Progress toward a goal, t11. Change over time, t12.

Set the variables

Every template declares the text, numbers and colors you would want to change as variables, so you never touch the animation itself:

• t09 Counter Card: label, value, prefix (such as $), suffix (such as % or +), the change pill, the comparison text and a small period chip. A change that starts with a minus turns the pill red and makes the sparkline fall.
• t10 Bar Chart: the question, five labels and five values. The biggest value wins automatically, and large values are shortened, so 12,400 shows as 12.4K.
• t11 Progress Ring: a label, the percent from 0 to 100, a short line under the number and the text of the pill.
• t12 Line Graph: a title, 2 to 12 comma-separated points, one label per point, a prefix, a suffix and the delta tag.
• t15 Leaderboard: five names, five scores and which row is yours.
• t39 Stat Sticker: value, label, prefix, suffix, the change pill and the corner it sits in.

Ask in plain English, as in the opening prompt, or render straight from the terminal with the values in JSON:

npx hyperframes render --variables '{"label":"NEW MEMBERS","value":12480}' -o renders/members.mp4

Make the count easy to read

A count-up only works if people can read the final number:

• Ease out. The number runs fast, then slows into its final value, so the eye lands on it.
• Equal-width digits. Tabular numbers stop the figure from wobbling while it counts.
• Hold it. Keep the final value on screen for at least 1.2 s, and hold the last frame 0.8 to 1.2 s.
• Size it. The number is a headline, 72 px and up on a 1080-wide canvas; labels stay at 28 px or more, inside the safe box.
• One sound for the count, one for the result. t09 starts a counter roll with the count and plays a ding on the final value.

Use your own real numbers

The templates ship with placeholder numbers on purpose, so you paste in real ones. Before you render:

• Take every figure from your own source: your analytics, your sales report, your member list.
• Compare like with like: the same period and the same measure. Write "vs last month" only if it is.
• Show drops as drops. A negative change in t09 or t39 turns red, and an honest dip is more believable than a chart that only rises.
• Work out percentages yourself. The delta tag in t12 is typed, not calculated, so check it against your points.
• Say where the number comes from in the caption under the post.

A spreadsheet export is the safest source, because nobody retypes anything. Ask Claude Code to read the numbers from your CSV while it builds, write them into the page, and show you the values it found before rendering.

Render many versions at once

Because the numbers are variables, one design can become a series: a weekly members update, one stat per product, one card per location. Put one set of values per row in a JSON rows file exported from a spreadsheet, then render them all:

npx hyperframes render --batch rows.json --strict-variables --output "renders/{slug}.mp4"

--strict-variables stops the render when a column name does not match a variable, instead of quietly showing the template's placeholder number. Spot-check a few renders where the longest label appears. The batch rendering guide covers the rows file step by step.

Over your own footage

t39 Stat Sticker has a transparent background. Render it as a WebM with an alpha channel, put it on a track above a talking-head clip, and the card sits in a corner while you talk about the number. Every corner option stays inside the Reels safe area. To pair a number with a bold title, see animated text for Reels.

Try it with one number

The free starter kit includes t09 Counter Card, so you can render one of your own numbers with a single sentence today. The other five data templates come with the full pack.