36-second example rendered by this skill from examples/stackwire · 1280×720
Example settingswhat each example above was built from
examples/stackwirebrief.json
- Brand
- Stackwire
- Headline
- The race for the top Stackwire plugin
examples/larkfieldbrief.json
- Brand
- Larkfield Library
- Headline
- The most-borrowed books at Larkfield Library
What you get
- A 1080p MP4: 36 s for 12 quarters, 34 s for 9 years
- Lifted overtakes, a smoothly rescaling axis and a period label that rolls like a counter
- Up to three callouts on the first overtake, each new No. 1 and the biggest climb, picked from the data or written by you
- A winner plate with the leader’s rank path and three facts: periods at No. 1, growth and when it took No. 1 for good
- Two looks, night and paper, each with an original soundtrack written by code, free to use
- Two made-up example films: plugin installs by quarter and library loans by year
- Open-source licenses for every part it builds on
Good fit
- Developer tools, app stores and marketplaces can show which plugin, app or seller led each quarter in one film people watch to the end.
- Libraries, publishers and newsrooms get a calm paper look for a year-by-year ranking, with a winner plate that tells the leader’s story.
- Teams posting a leaderboard on X or LinkedIn get callouts on every lead change without writing a single keyframe.
Not for
- More than 10 names or 12 periods, or negative values
- One series drawn over time (see Line Story Film)
- Vertical or square social cuts (16:9 only)
About this skill
A bar-chart race as a finished short film. Up to 10 names race through 6 to 12 years or quarters: bars re-sort with smooth, lifted overtakes, values count in tabular figures and a giant period label rolls like a counter in the corner. Callouts land on the first overtake and each new No. 1, placed where no bar runs under them. The race ends on the leader, whose bar grows into a winner plate with its rank path and three facts, then your brand and URL. The race is planned from your data, and the original soundtrack plays on the same plan.
Example request
Make a Ranking Race Film from installs.csv: our ten plugins by weekly installs over the last 12 quarters, in the night look, ending on https://stackwire.example.
How it works
Your agent
- 1
Ask the user
What is ranked, and the unit ("weekly installs", "loans per year")?
- 2
Write the brief
Start from
<skill>/examples/stackwire/brief.json(night) or<skill>/examples/larkfield/brief.json(paper). - 3
Make the film
copies the template into
my-film/; - 4
Check before you hand it over
Look at the sheet: the period label is readable in every race frame, the callouts sit beside the bars (not on them), and the winner plate and end card are composed.
- 1
You get
What you need
- Node.js 22 or newer, and FFmpeg on the PATH.
- HyperFrames, run through
npxand pinned to the tested version:npx --yes hyperframes@0.8.192. The first render downloads its own headless Chrome. If it says Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensure. - Network access to
fonts.googleapis.comandcdn.jsdelivr.net(GSAP) while rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js3.14.2. - The data: 3 to 10 names, 6 to 12 periods, and one number (0 or more) for each name in each period.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
apply-briefstops with a list of problems.Each line names the field and its limit. Shorten the text or fix the numbers, then run again. A brief with no
noteis refused until the data is marked illustrative, or alegalsource line is given.The console prints
[ranking-race] ... shorten it.A title, name or line did not fit at its smallest size. Shorten the text that is named.
A callout says the axis rescales.
The bars left no free space for the card, so the axis made room for it. That is fine. Pick a callout period where the lower bars are shorter if you prefer.
What’s in the download
- SKILL.md11.1 KB
- examples/
- examples/larkfield/1.29 KB1 file
- examples/stackwire/1.87 KB1 file
- scripts/
- scripts/apply-brief.mjs14.4 KBchecks the brief, resolves the theme and fonts, plans the race, and writes
storyboard.js,plan.jsonandindex.html - scripts/make-film.mjs3.82 KBone command from brief to MP4 (template, plan, music, render;
GSAP_FILEsupport) - scripts/music.mjs23.8 KBthe original soundtrack and sound design on the plan, normalised to -14 LUFS
- template/
- template/cues.json718 Bthe timing grid the picture and the music share
- template/film.css11.4 KBthe two themes, night and paper
- template/film.js41.2 KBthe choreography, with the race as
render(t)on one GSAP timeline - template/hyperframes.json298 B
- template/index.html1.94 KB
- template/package.json196 B
- template/race-core.js10.4 KBthe race maths (interpolation, overtakes, leader, callouts, winner facts), shared by the film and the scripts
- NOTICE.md1.17 KB
- TESTED.json996 B
15 files · 125 KB · installs to ~/.claude/skills/ranking-race-film for Claude Code and ~/.agents/skills/ranking-race-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 32–36 s · 1080p · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Data Stories · 10 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
How much data fits in one race?
3 to 10 names and 6 to 12 periods, with one value of 0 or more for each name in each period. A name at 0 stays hidden until it enters, and no 0 is ever shown.
Who decides where the callouts go?
The film does, unless you write them. It picks the first overtake, each new No. 1 and the biggest climb, up to three, and places each card where no bar runs under it. If there is no free spot, the axis makes room.
Can I use real numbers?
Yes. Leave out the illustrative data note and give a legal line with your source; the film refuses a brief with neither. The two example films use made-up numbers and say so on screen.
Which agents is Ranking Race Film written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package from scratch on HyperFrames: the race planner, the overtake and callout choreography, the winner plate, the two looks, the brief checks and the soundtrack generator.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.