40-second example rendered by this skill from examples/ferrow · 1280×720
Example settingswhat each example above was built from
examples/ferrowbrief.json
- Brand
- Ferrow Cycles
- Kicker
- Ferrow Cycles · 2014–2026
- Headline
- Twelve years at the bench
examples/tidepoolbrief.json
- Brand
- Tidepool
- Kicker
- Tidepool · 2021–2026
- Headline
- Five years of keeping in sync
What you get
- A 40 s MP4 at 1080p for 4 to 8 milestones
- Plaques with a drawn motif (workshop, bicycle, rocket, globe and more) or one figure whose digits spin onto it
- A giant year that rolls forward digit by digit as the camera travels down the rail
- A turning point with its own tab and a room full of warm light
- An overview with every milestone pinned on the path, then an end card with your Today and Next lines
- Two looks, paper and night, each with an original soundtrack written by code, and two made-up example films
- Open-source licenses for every part it builds on
Good fit
- Companies marking an anniversary can turn their history into a short film for the about page, a party or a launch.
- Open-source projects and studios get a retrospective with the figures that mattered, from the first commit to today.
- Founders opening a talk or an investor meeting get a how-we-got-here film with one clear turning point.
Not for
- Fewer than 4 or more than 8 milestones
- Photos or logos on the plaques: it uses its own drawn motifs
- Vertical or square social cuts (16:9 only)
About this skill
A company history told as a walk down a museum rail. Four to eight milestones stand as plaques beside a rail that runs away into the distance in 3D, with years and ticks printed on the floor. The camera stops at each plaque while the next one rises far down the rail, a giant serif year rolls forward digit by digit, and stat plaques spin their digits onto the figure as the camera arrives. The milestone you flag as the turning point floods the room with warm light. Then the camera cranes up to an overview with every plaque pinned on the path and lands on your brand, your "Today" and "Next" lines and your URL, with an original soundtrack locked to the picture.
Example request
Make a Milestone Timeline Film of our twelve years for https://ferrow.example: seven milestones from the garage bench in 2014 to six workshops today, with 2020 as the turning point, in the paper look.
How it works
Your agent
- 1
Ask the user for the story
Use only facts the user gives you.
- 2
Write the brief
Start from
<skill>/examples/ferrow/brief.json. - 3
Make the film
It copies the template into
my-film/, applies the brief (writingcues.jsonandstoryboard.js), writesassets/music.wavon that cue sheet and rendersmy-film/renders/<brand>-1080p.mp4. - 4
Check it before you hand it over
Look at the sheet: every plaque whole on its stop, the turning point warm, all pins readable in the overview, the end card clean.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames through
npx --yes hyperframes@0.8.192(the first render downloads its own headless Chrome; runnpx --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.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The title or line looks small, or the console prints
too long.The text is fitted in the real font down to its floor and gives up there. Shorten it in the brief;
apply-brief.mjsrejects text over the character limits.The render uses plain fonts or stops before the first frame.
It could not reach
fonts.googleapis.comorcdn.jsdelivr.net. Allow them, or setGSAP_FILEto a localgsap.min.js3.14.2."Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce.
What’s in the download
- SKILL.md10.4 KB
- examples/
- examples/ferrow/1.56 KB1 file
- examples/tidepool/1.41 KB1 file
- scripts/
- scripts/apply-brief.mjs12.5 KBchecks the brief, builds the cue sheet for this many milestones, resolves theme colours and fonts, writes
storyboard.js - scripts/color.mjs1.40 KBcolour mixing and contrast helpers
- scripts/make-film.mjs3.73 KBone command from brief to MP4 (template, brief, music, render; honours
GSAP_FILE) - scripts/music.mjs20.6 KBthe original soundtrack (paper: chamber pulse in D; night: ambient electronic in A minor) with sound design on the cues
- template/
- template/art.js15.0 KBthe illustration library built from simple shapes
- template/cues.json2.09 KBthe default cue sheet (rewritten for each brief)
- template/film.css13.1 KBthe look of plaques, floor print, pins and end card
- template/film.js40.7 KBthe 3D rail, camera, plaques, HUD, overview and end card on one GSAP timeline
- template/hyperframes.json298 B
- template/index.html2.05 KB
- template/package.json202 B
- template/storyboard.js4.42 KB
- NOTICE.md1004 B
- TESTED.json1.09 KB
17 files · 131 KB · installs to ~/.claude/skills/milestone-timeline-film for Claude Code and ~/.agents/skills/milestone-timeline-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 · 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 many milestones fit?
Four to eight, oldest first, each with a date, a short title and one sentence. The film is 40 s either way: the stops share 42 beats, so 7 milestones get 6 beats each and 6 get 7.
Can a milestone show a number?
Yes. Give it a stat instead of a picture, with a figure of up to 7 characters and a short label. The plaque shows its final figure while it waits, and the digits spin onto it when the camera arrives.
What is the turning point?
One milestone you flag as the turning point. It gets a Turning point tab, the room floods with warm light while the camera holds on it, and spare beats go to it first.
Which agents is Milestone Timeline 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 3D rail and camera, the plaques and motif library, the overview pins, 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.