17-second example rendered by this skill from examples/harbor-larder-impact · 1280×720

Example settingswhat each example above was built from

examples/harbor-larder-impactbrief.json

Brand: Harbor Larder
Kicker: Harbor Larder · Impact report 2026
Format: wide
Headline: What your giving did this year.
Colors: n1Field #e4643c · n2Field #f2c94c · n3Field #b9cdb0 · n4Field #a9c8e8 · ground #f4efe5 · paper #f4efe5 · ink #1c1a16 · accent #1c1a16

examples/fernvault-yearbrief.json

Brand: Fernvault
Kicker: Fernvault · 2026 in review
Format: tall
Headline: 2026, by the count.
Colors: n1Field #2b37ff · n2Field #c6f135 · n3Field #1b1d23 · n4Field #ff5b35 · ground #0c0d10 · paper #f3f1ea · ink #0c0d10 · accent #c6f135

What you get

A 1080×1920 MP4 reel with sound, or 1920×1080 with one field changed
An original soundtrack with sound effects on every wipe, count and the brand, synthesised for the exact length, with nothing to license
Wipes on the beat, one number on the drop and the brand on the final hit
3 to 5 numbers that count up and land on the beat as their unit springs in
A bar, ring, tally or shaded trend chart drawn from your own data
An end card with a recap of every figure, a button and an address
A pasteable PROMPT.md for Claude Code or Codex, and two finished example briefs
Open-source licenses for every part it builds on

Good fit

You have a handful of strong figures from a year in review or an impact report and want a reel for Instagram, TikTok or LinkedIn.
You need the same numbers as a 1080×1920 story and a 1920×1080 cut without redesigning anything.
You want every figure checked for format, chart data and contrast before a single frame renders.

Not for

Charts with many series or long time series
Footage or photo based reels
Numbers that need footnotes beyond one source line
Reels longer than 22 seconds
Live or auto-updating dashboards

About this skill

A vertical social reel that turns 3 to 5 numbers into a 13 to 22 second film at 1080×1920, with a 16:9 option, cut to an original beat-synced soundtrack generated on your machine. The title fills the frame as a stack of fitted lines over chips of the colour fields to come. Each figure wipes in on its own bold colour field through an angled mask on the beat, counts up in huge tabular type and lands on the second beat as its unit springs into place. Beside it a chart builds from your own data in SVG: bars, a ring, tally slats or a trend line with a shaded area. One number lands on the drop, and the brand card lands on the final hit.

Example request

Make a vertical by-the-numbers reel of our 2026: four big figures that count up on bold colour fields, each with a small chart, ending on our brand card with a button.

How it works

You ask
Make a vertical by-the-numbers reel of our 2026: four big figures that count up on bold colour fields, each with a small chart, ending on our brand card with a button.
Your agent
1. 1
  Make the project
2. 2
  Get the numbers
  Ask the person for 3 to 5 figures and what each one means.
3. 3
  Pick colours
  Every field must read at 4.5:1 with paper or ink; apply-brief checks this.
4. 4
  Write the brief
  Create brief.json in the project.
5. 5
  Apply the brief
  It checks the whole brief and, if anything is wrong, lists every problem at once with the fix: a figure that isn't a plain number, chart data that doesn't match its chart, numbers out of order, a colour the text can't be read on, or a music setting out of range.
6. 6
  Check
  "ok": true means it can render.
7. 7
  Look before you render
  Run the snapshot command that apply-brief printed.
8. 8
  Render
  It renders the composition with the pinned HyperFrames, checks the track and its stems with scripts/music/check.mjs (A1 to A11, see Sound effects and two-way sync), muxes it under the film as AAC with a short fade on the last frames and a true-peak limiter at -1 dBTP, and checks that the MP4 has sound as long as its picture.
9. 9
  Hand it off
  Give the person renders/big-number-reel.mp4 and two stills from snapshots/: the first number and the end card.
You get
- renders/big-number-reel.mp4

What you need

Node.js 22 or newer and FFmpeg (with ffprobe) on the PATH. FFmpeg also checks and muxes the music.
HyperFrames runs through npx, pinned to the version this template was tested with: npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome. If render says Chrome is missing, run npx --yes hyperframes@0.8.192 browser ensure once.
Network access to fonts.googleapis.com (Inter Tight) and cdn.jsdelivr.net (GSAP). See Troubleshooting if either is blocked.

Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

Render hangs, then shows a static frame, or reports sub_timeline_script_failure.
GSAP didn't load. If your network blocks cdn.jsdelivr.net, run npm i gsap@3.14.2 in the project, copy node_modules/gsap/dist/gsap.min.js to assets/vendor/, and point the <script src> in index.html at assets/vendor/gsap.min.js. apply-brief leaves it alone.
The figures are in the wrong font.
fonts.googleapis.com was unreachable during the render. HyperFrames caches the font after one successful fetch.
A number is missing.
Numbers must be filled in order: n4Value is ignored without n3Value, and apply-brief says so.

What’s in the download

SKILL.md26.5 KB
examples/
examples/fernvault-year/1.13 KBa 9:16 dark year in review for a made-up savings app. Four numbers: bars, an arrow, dots and a ring. launch-pulse at 122 bpm, 17.2 s. · 1 file
examples/harbor-larder-impact/1.14 KBa 16:9 light impact report for a made-up food bank. Four numbers: bars, a ring, dots and an arrow. warm-house at 120 bpm, 18 s. The previews on Lookbk are rendered from these two. · 1 file
scripts/
scripts/gate/the layout gate (gate.mjs) and its small Chrome DevTools client (cdp.mjs).
scripts/gate/cdp.mjs5.63 KB
scripts/gate/gate.mjs19.5 KB
scripts/music/beatgen 2, the music and sound-effects generator, with its checker (check.mjs, standards A1 to A11), muxer (mux.mjs), an empty CC0 samples/ manifest and its README.
scripts/music/examples/
scripts/music/examples/events.example.json555 B
scripts/music/samples/
scripts/music/samples/manifest.json371 B
scripts/music/beatgen.mjs11.8 KB
scripts/music/check.mjs50.0 KB
scripts/music/dsp.mjs20.0 KB
scripts/music/engine.mjs51.7 KB
scripts/music/mux.mjs2.36 KB
scripts/music/presets.mjs36.8 KB
scripts/music/README.md23.7 KB
scripts/music/samples.mjs4.90 KB
scripts/music/sfx.mjs17.1 KB
scripts/music/theory.mjs3.34 KB
scripts/music/voices.mjs16.9 KB
scripts/apply-brief.mjs15.9 KBchecks a brief, lays the reel out on the beat grid, generates the track, and writes the scene clips and the reel's length. No dependencies.
scripts/beat-grid.mjs13.0 KBreads the music block, predicts the bars and the drop, and runs beatgen.
scripts/render.mjs7.75 KBrenders, checks the track, muxes it in and checks the MP4.
template/the HyperFrames project.
template/hyperframes.json318 B
template/index.html20.7 KBholds the variables, the CSS and the scene clips.
template/package.json298 B
template/reel.js42.3 KBbuilds every scene, chart and the timeline from the variables.
NOTICE.md1.21 KBthird-party software this skill uses.
PROMPT.md2.77 KBa prompt to give Claude Code or Codex to make a reel for your brand with this skill.
TESTED.json5.65 KB

28 files · 403 KB · installs to ~/.claude/skills/big-number-reel for Claude Code and ~/.agents/skills/big-number-reel for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Notification Stack Reel+3

New

Lineup Announcement+3

Details

Output: MP4 · 18 s · 1920×1080 or 1080×1920
Needs: Node.js 22+, FFmpeg on the PATH and Chrome (HyperFrames downloads its own headless Chrome on first render); network access to fonts.googleapis.com and cdn.jsdelivr.net.
Series: Data Stories · 2 skills
For: Content creator Marketer Designer Ecommerce seller
Updated: Nov 2, 2026
Checked: Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

HyperFramesGSAPbeatgen 2 (bundled music and sound effects)FFmpeg

Uses tools

HyperFrames GSAP FFmpeg Chrome Node.js

Good forSocial media Brand

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

How many numbers can one reel hold?

Three to five. Each number holds an even number of beats close to 3 s, so with 3 numbers the reel runs about 13 to 15 s and with 5 about 18 to 22 s, always a whole number of bars. Numbers 4 and 5 are optional and must be filled in order.

Which charts can sit beside a number?

Bars with 2 to 8 values and optional short labels, a ring for a percentage, a row of tally slats for part of a total up to 100, a trend line with a shaded area up or down, or none. All are drawn in SVG from the data you write in the brief.

Where does the music come from?

The bundled beatgen generator synthesises an original track for the exact length of the reel in one of six styles, with a seed for variation, plus sound effects on each wipe, count and the brand. Nothing is sampled, so there is nothing to license. Every track is checked before it is muxed in.

Which agents is Big Number Reel 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 on HyperFrames (Apache-2.0) and GSAP (Standard License), with Inter Tight and JetBrains Mono under the SIL Open Font License 1.1, with an original soundtrack from the bundled beatgen generator.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.