30-second example rendered by this skill from examples/jotter · 1280×720
Example settingswhat each example above was built from
examples/jotterbrief.json
- Brand
- Jotter
- Kicker
- The note-taking title fight
examples/ternairbrief.json
- Brand
- Tern Air
- Kicker
- Heating your home, five ways
- Colors
- ground #f4efe6 · ink #16242a
What you get
- A 1080p MP4: 5 rounds run 30 s loud or 38.4 s calm
- A divider shoved 120 px into the loser’s half on every win, so its position reads as the score
- Staging picked from each round’s numbers: draw, upset, big margin, close or a plain win
- Figures that count to their real values, with lower-wins or higher-wins rounds, prefixes and suffixes
- Two moods, loud at 128 BPM and calm at 100 BPM, each with an original soundtrack written by code
- Two made-up example films: a notes app against paper and email, and a heat pump against a gas boiler
- Open-source licenses for every part it builds on
Good fit
- Products launching against an old way of working can put their numbers next to the alternative in a clip people share.
- Climate, energy and finance writers can compare two options round by round, with a draw shown as a draw.
- Teams with A/B test results get a short film where the score reads at a glance on a phone.
Not for
- More than two sides or more than 6 rounds
- Figures longer than 6 characters as shown (use a k or M suffix)
- Vertical or square social cuts (16:9 only)
About this skill
A head-to-head comparison staged like a title fight. A leaning divider splits the screen between the two sides’ colour panels and is also the running score: every round’s winner shoves it 120 px into the loser’s half. Each of 3 to 6 rounds shows both figures in big type with tick-bar meters and a WINS or EVEN tag, and the staging comes from the numbers: a draw lunges both ways, an upset swings the camera to the underdog, a big margin hits with shake and a close round counts slowly over a heartbeat. It ends on the verdict and the score, then your brand and URL, with its own soundtrack in a loud or a calm mood.
Example request
Make a Versus Film of Jotter against paper and email for https://jotter.example: five rounds, the loud mood, ending on "Jotter takes the belt, four rounds to one".
How it works
Your agent
- 1
Ask the user for the fight card
Numbers must be the user's own.
- 2
Write the brief
Start from
<skill>/examples/jotter/brief.json(loud) or<skill>/examples/ternair/brief.json(calm). - 3
Make the film
It copies
template/intomy-film/, applies the brief (writescues.json,storyboard.js, the font link), writes the soundtrack tomy-film/assets/music.wavand rendersmy-film/renders/<brand>-1080p.mp4. - 4
Check it before handing it over
Look for: both figures big in every round, the divider further into the loser's half after each win, the score bug matching, the verdict score across the seam, the end card from the last 3.75 s (loud) or 4.8 s (calm).
- 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(runnpx --yes hyperframes@0.8.192 browser ensureonce if it says Chrome is missing). - Network access to
fonts.googleapis.comandcdn.jsdelivr.netwhile rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js(3.14.2). - From the user: the two sides (names and a colour each), 3–6 rounds of real numbers with which way wins, the brand name and URL, and the mood.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
apply-brief stops with a list of problems.
Each line names the field and its limit. Common ones: a side name over 14 characters without
short, a value like"7.8k"written as text (use7.8and"suffix": "k"), a number over 6 characters (usekorM).A round got a staging you did not expect.
It comes from the data: equal values are a draw, a win by the side that loses overall is an upset, margins of 60%+ are big, under 25% close. Two same stagings in a row are alternated.
The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensure, then render again.
What’s in the download
- SKILL.md11.8 KB
- examples/
- examples/jotter/980 B1 file
- examples/ternair/1.06 KB1 file
- scripts/
- scripts/apply-brief.mjs14.8 KBvalidates the brief, scores the rounds, picks each round's staging, writes
cues.json,storyboard.js, fonts and the music clip - scripts/color.mjs1.40 KBcolour mixing and contrast helpers
- scripts/make-film.mjs3.72 KBone command from brief to MP4 (template, brief, music, render; honours
GSAP_FILE) - scripts/music.mjs26.8 KBthe original loud (128 BPM) and calm (100 BPM) soundtracks with the sound design on the cue sheet, normalised to -14 LUFS
- template/
- template/cues.json2.47 KBa sample cue sheet (rewritten for every brief)
- template/film.css9.57 KBthe type, plates, bug, tags and end card
- template/film.js45.6 KBpanels, divider, figures, meters, staging, camera, verdict and end card on one GSAP timeline
- template/hyperframes.json298 B
- template/index.html2.13 KBthe HyperFrames composition
- template/package.json190 B
- template/storyboard.js4.66 KB
- NOTICE.md1.47 KB
- TESTED.json1.11 KB
16 files · 128 KB · installs to ~/.claude/skills/versus-film for Claude Code and ~/.agents/skills/versus-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 30–38 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 does it decide how each round looks?
From the numbers. Equal values are a draw, a win by the side that loses overall is an upset, a margin of 60% or more hits hard and one under 25% counts slowly over a heartbeat. Any other win pushes in on the winner.
Can the side that wins overall lose a round?
Yes, and the film shows it. Each round says whether lower or higher wins, and the divider is shoved into the half of whoever lost that round, so a score like 3–1 with a draw reads honestly.
What moods are there?
Loud, at 128 BPM in Big Shoulders Display on a dark ground, and calm, at 100 BPM in Bricolage Grotesque on paper. Each has its own original soundtrack, and you pick a colour for each side.
Which agents is Versus 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 divider score, the five stagings, the verdict and end card, 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.