Animated charts and bar chart races your agent renders to MP4
An animated chart works when the motion carries the point: a bar overtakes, a line climbs past an event, a share fills in. These skills turn your numbers into a finished 1080p film, most with an original soundtrack on the same beat. They are not an in-browser chart editor: your agent writes a brief from your data and renders the MP4 on your machine.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
Animated chart examples, by the story they tell
From the Lookbk catalog only: the Data Stories skills that draw a chart from your numbers, with the bar chart race first. Each pick says what data it takes. They render with HyperFrames on your own machine and need Node.js 22 or newer, FFmpeg and Chrome (HyperFrames can download its own). All of them are Pro skills. The install steps below use Kinetic Title Drop, a free video skill on the same renderer.
- Ranking Race FilmClaude CodeCodexCursor+3 more agents
01 · Data Stories · Pro
Ranking Race Film
MP4 · 32–36 s · 1080p · with music
The bar chart race. Up to 10 names race through 6 to 12 years or quarters: bars re-sort with smooth overtakes, values count up and a big period label rolls in the corner, then the leader’s bar grows into a winner plate. It takes the periods and a value for each name in each period, and plans the race and its callouts from those numbers.
Worth knowing: Up to 10 names and 12 periods, no negative values, and 16:9 only.
Needs: Node.js 22+, FFmpeg and Chrome
See what Ranking Race Film makes - Data Story: BarsClaude CodeCodexCursor+3 more agents
02 · Data Stories · Pro
Data Story: Bars
MP4 · 12 s · 1080p
An animated bar chart from a CSV: a script takes the first text column as the labels and the first numeric column as the values, then bars grow with counting values, a trend line draws through them and the bar that matters gets a callout. Twelve seconds.
Worth knowing: Up to 12 bars, positive values only, and no soundtrack.
Needs: Node.js 22+ and FFmpeg
See what Data Story: Bars makes - Line Story FilmClaude CodeCodexCursor+3 more agents
03 · Data Stories · Pro
Line Story Film
MP4 · 40 s · 1080p · with music
An animated line graph told like a newspaper graphic: the camera follows the head of the line as it draws, slows and flags each event you name, then pulls out to bracket the change from start to end. A script drafts the brief from a CSV of dates and values.
Worth knowing: One main series, with an optional muted second one; not for bars.
Needs: Node.js 22+, FFmpeg and Chrome
See what Line Story Film makes - Hundred Dots FilmClaude CodeCodexCursor+3 more agents
04 · Data Stories · Pro
Hundred Dots Film
MP4 · 31–40 s · 1080p · with music
Shares told as if from 100 people: dots rain into a grid, then fly into piles, columns or a waffle for each survey question while each percentage counts up, with one dot marked “you” to follow. It takes two or three questions, each with its answers and their percentages.
Worth knowing: Each question’s answers must add up to 100 percent.
Needs: Node.js 22+, FFmpeg and Chrome
See what Hundred Dots Film makes - Funnel Flow FilmClaude CodeCodexCursor+3 more agents
05 · Data Stories · Pro
Funnel Flow Film
MP4 · 25–38 s · 1080p · with music
A conversion funnel as one pour of particles: the channel is as wide as each stage’s share, the people who drop out peel off into a lost pile with its count and reason, and it ends as a sankey with every rate. It takes 3 to 6 stages with their counts.
Worth knowing: Counts must fall from stage to stage, and the last must be at least 0.4% of the first.
Needs: Node.js 22+, FFmpeg and Chrome
See what Funnel Flow Film makes - Versus FilmClaude CodeCodexCursor+3 more agents
06 · Data Stories · Pro
Versus Film
MP4 · 30–38 s · 1080p · with music
A head-to-head comparison staged like a title fight: 3 to 6 rounds, each with both figures in big type and meters, and a divider that the running score pushes across the screen. It takes the two sides and both figures for each round, with which way wins.
Worth knowing: Two sides only.
Needs: Node.js 22+, FFmpeg and Chrome
See what Versus Film makes - Big Number FilmClaude CodeCodexCursor+3 more agents
07 · Data Stories · Pro
Big Number Film
MP4 · 34 s · 1080p · with music
Three or four headline numbers on odometers, each followed by a picture made for its kind of number: a scale for growth, a half-ring for a share, a grid of units or a before-and-after slide. It takes each number, its unit, a label and what it is compared with.
Worth knowing: Single figures, not a series; for a series see Line Story Film or Data Story: Bars.
Needs: Node.js 22+, FFmpeg and Chrome
See what Big Number Film makes - Globe Arcs FilmClaude CodeCodexCursor+3 more agents
08 · Data Stories · Pro
Globe Arcs Film
MP4 · 25–40 s · 1080p · with music
One place reaching many: arcs fly from your hub to 6 to 10 destinations on a turning globe, each as thick and bright as its value, with callouts on the highlighted routes and a total that counts up. It takes the hub and each destination with its coordinates and value.
Worth knowing: One hub, with every destination within about 7,000 km of the middle of the network.
Needs: Node.js 22+, FFmpeg and Chrome
See what Globe Arcs Film makes
Which chart for which story
Pick the chart from the question the viewer should be able to answer at the end, not from the data you happen to have.
01
Bar chart race
Rank over time: who leads, and when the lead changed hands.
02
Line
A trend: how one number moved, and what happened along the way.
03
Bars
A short series side by side, with the one value that matters called out.
04
Dots
Shares of a whole, read as people out of 100.
05
Funnel
Drop-off: how many get from each step to the next, and where the rest leave.
06
Head to head
Two sides compared on a few measures, round by round.
An agent skill, not an online chart maker
There is no editor in the browser and nothing to upload. Your agent (Claude Code, Codex, Cursor or another that can run commands) writes a short brief from your spreadsheet or CSV, the skill checks it against its limits, and the film renders on your computer. You need Node.js 22 or newer, FFmpeg and Chrome.
If you want to drag bars around and export a quick GIF, a chart tool in the browser is the better fit. If you want a finished, timed film with callouts and music that you can render again when the numbers change, a skill is.
Install
Install a pick with your agent
Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Kinetic Title Drop, which is free; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Kinetic Title Drop" skill from Lookbk (https://lookbk.dev/skills/kinetic-title-drop). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop 2. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/kinetic-title-drop
- Codex
- ~/.agents/skills/kinetic-title-drop
- Cursor
- ~/.agents/skills/kinetic-title-drop
3. Ask for the result
Describe it in plain words, for example:
Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make a bar chart race video?
Give your agent the names, the periods and a value for each name in each period, from a spreadsheet or a CSV. Ranking Race Film checks the brief, plans the overtakes and callouts from your numbers and renders a 32 to 36 second 1080p MP4 with its own soundtrack.
Can I make an animated chart from a CSV?
Yes. Data Story: Bars and Line Story Film each come with a script that drafts the brief from a CSV. For the others your agent copies the figures from your file into the brief.
Is music included?
Every pick except Data Story: Bars writes an original soundtrack on your machine, timed to the same beat as the picture, so there is no track to license.
Are the example numbers real?
No. The examples use made-up companies and illustrative data. With your own numbers, most of these skills have a source line that names where they come from on screen.