29-second example rendered by this skill from examples/gridline · 1280×720
What you get
- A 29 s MP4 at 1080p or 4K in a dark or light theme, colored from your accent
- Four to six metric tiles whose numbers roll up digit by digit, with sparklines or bars
- A main chart that draws in and then streams, with an optional dashed comparison line
- An event feed, a flow of particles from two to four sources into your product, and an alert that opens into a detail view
- An original soundtrack written by code, with a thud, tick, blip or ping on every move, free to use
- A brief checker that lists every long line, short series or misplaced anomaly at once
- Two made-up example films to start from
- Open-source licenses for every part it builds on
Good fit
- Analytics, monitoring and observability products can show the dashboard people actually watch, with numbers rolling up and a chart that keeps streaming.
- Fintech, payments, energy, health and IoT teams can show data flowing in from its sources and one alert opening into its cause, the moment that sells the product.
- Teams without a polished demo account get crisp charts at 4K, because every tile, chart and feed is drawn from numbers in the brief rather than captured from screen.
Not for
- Showing your real dashboard as a screenshot (it redraws it from numbers)
- Vertical or square social cuts (16:9 only)
- A single chart or number on its own (see Data Story Bars)
About this skill
A 29-second launch film for a product built around a live dashboard. The window builds itself tile by tile on the beat while every number rolls up like an odometer, then the camera pushes into the main chart as it streams, pans to an event feed that ticks in, and whips down to a panel where data flows from its sources into your product. An alert fires on one tile, the camera dives in and it opens into a detail view with the spike marked, a pinned note and the causes. Every chart is drawn from the numbers in your brief, and it comes with its own beat-synced techno soundtrack.
Example request
Make a Dashboard Flow Film for Gridline 2.0: load, solar, frequency and feeder temperature up top, telemetry flowing in from meters and substations, and the feeder alert opening.
How it works
Your agent
- 1
Ask three things
What is being launched (2.0, a public beta, a new dashboard)?
- 2
Read the product
It prints the page's title, description, headings, calls to action, colours and fonts, saves them to
site.json, and saveslogo.svgwhen the header has an inline SVG logo. - 3
Write the brief
Start from
examples/gridline/brief.json(dark, six tiles) orexamples/ledgerly/brief.json(light, five tiles). - 4
Make the film
It copies the template into
my-film/, applies the brief, writessoundtrack.wav(an original 124 BPM minimal techno track with every sound effect on the cue sheet;--key Eor--key Achanges its key,--no-musicskips it) and rendersmy-film/renders/<name>-1080p.mp4. - 5
Check before you hand it over
Look at the sheet.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - 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 of its own. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Inter Tight, Inter and JetBrains Mono) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked. - Chrome, Chromium or Edge for
capture.mjs, if you want to read the product's site first. SetCHROME_PATHif it isn't in the usual place. - Music is generated by
scripts/music.mjs. You can bring your own licensed track instead.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
A value or caption shrinks or prints
[dashboard-film] text too long.Shorten that line;
apply-brief.mjslists lines over their limit before the render.The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.The film renders with plain fonts or stops before the first frame.
The render could not reach
fonts.googleapis.comorcdn.jsdelivr.net. Allow them, or setGSAP_FILEto a localgsap.min.js3.14.2 for GSAP.
What’s in the download
- SKILL.md10.7 KB
- examples/
- examples/gridline/7.21 KB2 files
- examples/ledgerly/7.07 KB2 files
- scripts/
- scripts/apply-brief.mjs14.8 KBchecks the brief, copies the mark, picks readable colours on your accent and writes
storyboard.jsandsfx.json - scripts/capture.mjs23.9 KBreads a site (title, headings, colours, logo) and takes screenshots with your Chrome
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/make-film.mjs3.68 KBone command from brief to MP4 (template, brief, music, render)
- scripts/music.mjs12.7 KBwrites the original 124 BPM minimal techno soundtrack with sound effects on the cue sheet
- template/
- template/cues.json937 Bthe beat sheet the picture and the music share
- template/film.css17.7 KBthe dark and light themes
- template/film.js47.5 KBthe dashboard, its live drawing and the six-scene choreography on one GSAP timeline
- template/hyperframes.json298 B
- template/index.html2.23 KB
- template/package.json198 B
- template/storyboard.js25 B
- NOTICE.md963 B
- TESTED.json594 B
20 files · 156 KB · installs to ~/.claude/skills/dashboard-flow-film for Claude Code and ~/.agents/skills/dashboard-flow-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 29 s · 1080p or 4K · with music
- Needs
- Node.js 22+ and FFmpeg
- Series
- Launch & Demo Films · 8 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
Do I need screenshots of my dashboard?
No. You give numbers and words: four to six tiles with a value and a series, a main chart of 28 to 60 points, 4 to 10 feed events, 2 to 4 flow sources and an alert with its own series, anomaly and 3 or 4 causes. The template draws everything from them in your accent color, in a dark or light theme.
Where does the music come from?
music.mjs writes a 29 second minimal techno track at 124 BPM with kick, hats, rolling bass and stabs, plus a thud as each tile lands, ticks while numbers roll, a blip per feed event and a ping on the alert, on the same cue sheet. It is generated by code in the package, so you may use it anywhere, and you can pass your own licensed track instead.
Can the numbers be real?
Yes, and for a real product they should be: put your real or clearly labelled sample data in the brief. The film shows exactly the values you give, with the decimals you write, and the corner label says "Concept film" until you clear it for your own product.
Which agents is Dashboard Flow 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 made this package from scratch: the dashboard, its odometers, streaming chart, event feed, particle flow and alert detail, the cue sheet, the music generator and the brief checker were written for it on HyperFrames.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.