40-second example rendered by this skill from examples/kerning-club · 1280×720
Example settingswhat each example above was built from
examples/kerning-clubbrief.json
- Brand
- Kerning Club
- Colors
- paper #f3ead7 · ink #2b2420
examples/hearthlinebrief.json
- Brand
- Hearthline
- Colors
- paper #0f1a3a · ink #f6efdc
What you get
- A 40 s MP4 at 1080p for three questions, or 31 s for two
- The same 100 dots re-sorting for every question, with one you can follow
- Three layouts (piles, columns, waffle), dots or person glyphs, on paper or night
- A closing number that lights its share of the waffle and rolls up beside it
- Percentages checked to add up to 100 before the render
- An original soundtrack written by code, free to use, and two made-up example films
- Open-source licenses for every part it builds on
Good fit
- Communities, agencies and research teams can share a state-of survey as a short film instead of a slide of pie charts.
- Customer and people teams can show how a group answered two or three questions, with one dot marked "you" for the viewer to follow.
- Report launches get a closing number that lights its share of a 10 × 10 waffle, which reads at a glance on a phone.
Not for
- Answers that do not add up to 100 percent
- More than three questions or five answers per question
- Vertical or square social cuts (16:9 only)
About this skill
A survey told as if the answers came from 100 people. 100 dots rain into a grid and one of them is marked "you". For each of two or three questions the same dots fly on curved, springy paths into piles, columns or a waffle, one group per beat, while each percentage counts up, and the dot marked "you" can be followed through every answer. At the end the dots settle into a big waffle, your closing share lights up in a wave beside a huge rolling number, and they fold into a tiny mark next to your brand. It comes with its own marimba soundtrack.
Example request
Make a Hundred Dots Film from our designer survey for https://kerningclub.example: three questions, mark "you" in the biggest group, and end on "56% still start with a pencil".
How it works
Your agent
- 1
Ask the user for the story
Ask for, or draft from what they give you and confirm.
- 2
Write the brief
Start from
<skill>/examples/kerning-club/brief.json(cream paper, coral and teal, dots) or<skill>/examples/hearthline/brief.json(night blue and yellow, little people). - 3
Make the film
It copies the template into
my-film/, applies the brief (which writescues.json, the beat sheet for this many questions), writesassets/soundtrack.wavon that beat sheet and rendersmy-film/renders/<brand>-1080p.mp4at high quality with 2 workers. - 4
Check before you hand it over
Look at the sheet: every label readable, nothing cut at the edges, the closing number legible.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames through
npx, pinned:npx --yes hyperframes@0.8.192. The first render downloads its own headless Chrome (npx --yes hyperframes@0.8.192 browser ensureif it says Chrome is missing). - Network access to
fonts.googleapis.comandcdn.jsdelivr.net(GSAP) while rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js(3.14.2);make-film.mjscopies it in. - The numbers: 2 or 3 questions, each with 2 to 5 answers and a whole-number percent per answer that adds up to exactly 100.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
apply-briefsays the percents add up to 99 or 101.Each dot is one percent. Round the largest remainder up or down until the answers sum to exactly 100.
A label shrinks or the console prints
[hundred-dots] text too long.The film measures each line in the real font and steps it down to 28 px before giving up. Shorten the label (two short lines fit best in the
blobsandcolumnslayouts with 5 answers).apply-briefsays closing.value gives N dots out of 100.The waffle lights a share of the 100 dots. Use a percent ("56%") or a ratio ("8 in 10", "3 of 4"), or set
closing.dotsto the number of dots to light.
What’s in the download
- SKILL.md12.1 KB
- examples/
- examples/hearthline/1.53 KB1 file
- examples/kerning-club/1.65 KB1 file
- scripts/
- scripts/apply-brief.mjs12.1 KBchecks the brief, writes
cues.jsonfor this many questions,storyboard.jsand the font link - scripts/color.mjs1.40 KBcolour mixing and contrast helpers
- scripts/make-film.mjs3.72 KBone command from brief to MP4 (template, brief, music, render)
- scripts/music.mjs18.9 KBwrites the original 108 BPM marimba soundtrack with ticks, chimes and whooshes on the cue sheet, at -14 LUFS
- template/
- template/cues.json1.26 KBthe beat sheet the picture and the music share (rewritten for each brief)
- template/film.css7.46 KBpaper, glyphs (dot, person, square), type and the end card
- template/film.js42.6 KBthe whole choreography on one GSAP timeline (layouts, dot matching, flights, numbers, closing waffle and odometer, end card)
- template/hyperframes.json298 B
- template/index.html1.85 KBthe HyperFrames composition
- template/package.json196 B
- template/storyboard.js3.43 KB
- NOTICE.md1.10 KB
- TESTED.json909 B
16 files · 110 KB · installs to ~/.claude/skills/hundred-dots-film for Claude Code and ~/.agents/skills/hundred-dots-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 31–40 s · 1080p · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Data Stories · 5 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 many questions and answers fit?
Two or three questions with 2 to 5 answers each. Each answer is a whole-number percent and the answers to a question must add up to 100; the brief check stops the render if they do not.
Can the dots be people?
Yes. The glyph field picks dots or simple person shapes, and the look can be cream paper or a dark night style. The layouts rotate between round piles, stacked columns and a waffle.
How long is the film?
40 s with three questions and 31 s with two, at 1080p with a 108 BPM marimba soundtrack generated by the package.
Which agents is Hundred Dots 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 dot choreography, the three layouts, the closing waffle, 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.