40-second example rendered by this skill from examples/harbor · 1280×720
Example settingswhat each example above was built from
examples/harborbrief.json
- Brand
- Harbor Ledger
- Name
- harbor-heat
- Kicker
- Climate desk · average July high
- Style
- paper
- Headline
- Are Harbor City's summers really getting hotter?
- Colors
- paper #f2ece0 · ink #1c1a17 · hero #c2381f
examples/tallybrief.json
- Brand
- Tally
- Name
- tally-usage
- Kicker
- Tally · monthly active workspaces
- Style
- terminal
- Headline
- Did the free tier actually grow Tally?
- Colors
- paper #090d0c · ink #e2ebe5 · hero #3ff0a0
What you get
- A 40 s MP4 at 1080p with a tracking camera, a live counter and a pull-out
- 12 to 120 dated values, an optional muted comparison line and 2 to 4 events with labels that keep clear of both lines
- A bracketed start-to-end delta and your takeaway in place of the question
- Two looks: cream newspaper with a serif, or a dark terminal with mono figures
- from-csv.mjs to draft the brief from a spreadsheet export
- 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
- Newsrooms, newsletters and climate or city writers can publish a chart as a short film that asks a question and answers it.
- Product and growth teams can show a usage or revenue curve with the launches and outages that explain it pinned to the dates.
- Analysts with a CSV get a first draft of the brief from from-csv.mjs, then only write the headline, the events and the takeaway.
Not for
- Bar charts or several hero series at once
- A single number (see Big Number Film)
- Vertical or square social cuts (16:9 only)
About this skill
One line, told the way a newspaper graphics desk would. The film asks a question, then the camera tracks the head of the line as it draws across a chart several screens wide, with the current value riding along and the axis rescaling as it climbs. At each event you name the drawing slows, a flag lands and the point pulses. Then the camera pulls out to the whole series, brackets the change from start to end with a big delta and swaps the question for the answer. It comes with its own documentary-style soundtrack and a script that drafts the brief from a CSV.
Example request
Turn july-highs.csv into a Line Story Film asking "Are Harbor City's summers really getting hotter?", with the 1988, 2003, 2014 and 2022 events and our URL harborledger.example.
How it works
Your agent
- 1
Ask the user for the story
Never invent numbers for a real company.
- 2
Draft the brief from a CSV (optional)
It finds the first all-date column and the first numeric column (or
--date=month --value=revenue, plus--compare=columnfor a muted second series), keeps the last 120 rows, reads the number format ($1,204gives prefix$;12%gives suffix%), picks the date granularity and suggests four event dates where the line turns hardest. - 3
Write the brief
Start from
<skill>/examples/harbor/brief.json(light, newspaper) or<skill>/examples/tally/brief.json(dark, terminal). - 4
Make the film
It copies the template into
my-film/, applies the brief (and prints where each event lands and the delta), writesassets/soundtrack.wavon the same cues, and rendersmy-film/renders/<name>-1080p.mp4at high quality. - 5
Check before you hand it over
Look at the sheet: labels clear of the line, the delta readable, the takeaway on two lines at most.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames through
npx, pinned to the version this skill was tested with:npx --yes hyperframes@0.8.192. The first render downloads a 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.js3.14.2 andmake-film.mjsuses it. - One series of 12 to 120 dated values. Real numbers need a real source; made-up numbers must say so on screen.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
A label or the takeaway prints
[line-story] text too long.It shrank to its smallest size and still did not fit. Shorten the words;
apply-brief.mjsalready rejects anything over the field limit.Event labels sit over a line or crowd each other in the final shot.
The layout tries every combination of positions (above, below, hung from rows at the top of the plot, with poles that lengthen to reach) and scores clearance from both the hero and the comparison line. Events closer together than about a tenth of the series compete for the same space. Drop one, move it, or shorten its label to one line.
The axis looks squashed or the line is a flat band.
Set
baselinetoauto(zero-based axes flatten series that move a little around a large value), or usedelta: "absolute".
What’s in the download
- SKILL.md12.2 KB
- examples/
- examples/harbor/7.40 KB1 file
- examples/tally/8.05 KB1 file
- scripts/
- scripts/apply-brief.mjs14.7 KBvalidates the brief, places events on bar downbeats, derives the palette and writes
storyboard.js,cues.json, fonts and music into the project - scripts/color.mjs1.40 KBcolour mixing and WCAG contrast helpers
- scripts/from-csv.mjs7.49 KBdrafts a brief from a CSV (dates, values, format, suggested event dates)
- scripts/make-film.mjs3.49 KBone command from brief to MP4 (template, brief, cues, music, render; honours
GSAP_FILE) - scripts/music.mjs19.2 KBwrites the original 96 BPM documentary-electronic soundtrack with its sound design on the cue sheet, normalised to about -14 LUFS
- template/
- template/cues.json737 Bthe 96 BPM cue sheet the picture and the music share
- template/film.css7.26 KBthe house style (type sizes, rules, labels, texture)
- template/film.js48.4 KBthe data camera, line drawing, axes, counter, event layout and the whole timeline
- template/hyperframes.json298 B
- template/index.html4.69 KB
- template/package.json194 B
- NOTICE.md1.05 KB
- TESTED.json1.06 KB
16 files · 138 KB · installs to ~/.claude/skills/line-story-film for Claude Code and ~/.agents/skills/line-story-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 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 much data can one film show?
One series of 12 to 120 dated values, plus an optional muted comparison series and 2 to 4 events with short labels. The chart is several screens wide and the camera follows the head of the line.
What happens at the end?
The camera pulls out to the whole series, the start and end values are pinned, a bracket shows the change with a big delta and your takeaway replaces the question. The end card keeps the line as a sparkline under your brand.
Can I use real data?
Yes, with a source line, which stays on screen through the film. The two examples use made-up numbers and say so on screen, as a film with invented numbers should.
Which agents is Line Story 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 tracking camera, the label placement, the two newsroom looks, the CSV script, 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.