21-second example rendered by this skill from examples/night-heron · 1280×720
Example settingswhat each example above was built from
examples/night-heronbrief.json
- Format
- wide
- Colors
- ground #1e2326 · ink #ece7dc · accent #ffb9a6
examples/lark-lindenbrief.json
- Format
- tall
- Colors
- ground #22302a · ink #f1ece1 · accent #e2a640
What you get
- A 9:16 or 16:9 MP4 of your menu on a felt letterboard or a chalkboard
- An original beat-synced soundtrack with letter, flip and chalk sound effects
- Letters pressed in on the beat and prices that flip or get chalked in
- A hand-lettered daily special timed to the music's drop
- An end card that sets your opening hours and address on the board
- A brief checker that lists every problem at once and picks a readable length
- A layout gate that checks text size, safe areas and focus before every render
- Open-source licenses for every part it builds on
Good fit
- A cafe wants a short reel of today's menu and special for Instagram and the screen by the counter.
- A bar wants its chalkboard menu, hours and address as a 16:9 loop for the TV above the bar.
- A bakery changes its daily special and needs a fresh vertical post each morning without a designer.
Not for
- Long menus: more items than a viewer can read in one short film
- Photos or footage of real dishes
- Live digital signage that updates from a point-of-sale system
- Long restaurant promos or brand films
About this skill
Menu Board Reel turns a cafe, restaurant or bar menu into a short film of a physical menu board drawn entirely in code. Choose a felt letterboard with moulded plastic letters or a painted chalkboard with yesterday's menu half erased. A camera reads the board up close while it is set on the beat: letters press into the grooves, prices flip like a split-flap or get chalked in, and the daily special is hand-lettered on the music's drop. The film whips back to the venue's name to set the opening hours and address. It ships in 9:16 and 16:9 with an original beat-synced soundtrack and sound effects, a layout gate for safe areas and text size, and two invented example venues.
Example request
Use the Menu Board Reel skill to make a 9:16 film of our cafe menu on a felt letterboard: our name, two sections with prices, today's special, our opening hours and our address.
How it works
Your agent
- 1
Make the project
- 2
Get the menu
Ask the person for their real menu.
- 3
Pick the board and the colours
inkandaccentmust read at 4.5:1 onground(6:1 on chalk, because the grain thins the strokes);apply-briefchecks this. - 4
Write the brief
Create
brief.jsonin the project. - 5
Apply the brief
It checks the whole brief and lists every problem at once, with the fix.
- 6
Look before you render
Run the
snapshotcommandapply-briefprinted. - 7
Render
It runs the layout gate, renders with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(standards A1 to A11), muxes the track in with a true-peak limiter at -1 dBTP, and checks that the MP4 has sound as long as its picture. - 8
Hand it off
Give the person the MP4 and two stills: the special and the end card.
- 1
You get


What you need
- Node.js 22 or newer, and FFmpeg (with
ffprobe) on the PATH. FFmpeg also checks and muxes the music. - Google Chrome (or Chromium). The layout gate opens the project in it. Set
CHROME_PATHif it is not in the usual place. - 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. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Saira Condensed, Caveat, Yellowtail) andcdn.jsdelivr.net(GSAP).
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs, or shows a static frame.
GSAP didn't load. If your network blocks
cdn.jsdelivr.net, copygsap.min.js3.14.2 intoassets/vendor/and point the<script src>at it.The letters look wide and plain.
fonts.googleapis.comwas unreachable, so the board laid out in a fallback font. The template waits for all three faces before it measures, so a retry with the network up fixes it.The gate says L1.
A line already on the board was moved into the lens ramp, which happens when an item name is very long and the camera zooms out to fit it. Shorten the name.
What’s in the download
- SKILL.md17.3 KB
- examples/
- examples/lark-linden/710 Ban invented coffee bar on a bottle-green felt letterboard, 9:16,
warm-houseat 120 bpm, 19.45 s. · 1 file - examples/night-heron/729 Ban invented bar on a chalkboard, 16:9,
tech-minimalat 124 bpm, 20.79 s. · 1 file - scripts/
- scripts/gate/the layout gate, with the lens rules L1 and L2.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs22.4 KB
- scripts/music/beatgen 2.1 with the
press,flipandscratchsounds, its checker and its README. - scripts/music/examples/
- scripts/music/examples/events.example.json555 B
- scripts/music/samples/
- scripts/music/samples/manifest.json371 B
- scripts/music/beatgen.mjs11.8 KB
- scripts/music/check.mjs50.2 KB
- scripts/music/dsp.mjs20.0 KB
- scripts/music/engine.mjs51.7 KB
- scripts/music/mux.mjs2.36 KB
- scripts/music/presets.mjs36.8 KB
- scripts/music/README.md23.7 KB
- scripts/music/samples.mjs4.90 KB
- scripts/music/sfx.mjs19.5 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs14.7 KBchecks a brief, picks the length, snaps the events, makes the track and writes the project.
- scripts/beat-grid.mjs13.0 KBreads the
musicblock and runs beatgen. - scripts/render.mjs7.75 KBgate, render, track check, mux, MP4 check.
- template/the HyperFrames project.
index.htmlholds the variables, the materials (CSS and SVG filters) and the lens.board.jsbuilds the board, the camera and the timeline from the variables, the beat grid and the synced times. - template/board.js41.0 KB
- template/hyperframes.json318 B
- template/index.html19.7 KB
- template/package.json298 B
- NOTICE.md1.77 KBthird-party software and fonts.
- TESTED.json3.04 KB
27 files · 391 KB · installs to ~/.claude/skills/menu-board-reel for Claude Code and ~/.agents/skills/menu-board-reel for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 19 to 21 s · 1080×1920 or 1920×1080
- Needs
- Node.js 22+, FFmpeg (with ffprobe) and Google Chrome; HyperFrames 0.8.192 runs through npx and needs network access for its fonts and GSAP.
- Series
- Social Shorts · 14 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 long is the film?
apply-brief picks the shortest length in whole bars where every shot can be read, so it grows with the menu. The examples run 19.45 s and 20.79 s, and a menu that would need more than 16 bars is refused with a request to shorten it.
Can I show prices with a currency sign?
No. A letter set has digits only, so prices are plain figures like 4.50 or 12, and apply-brief refuses a currency sign. Put the currency in a house note if your customers need it.
Why is the bottom of the vertical film blurred?
The platforms' buttons cover the bottom 35% of a 9:16 frame, so text stays in the band between 14% and 65% of the height. Lines already on the board fill the rest under a 16 px lens blur, and the layout gate checks that no row is half in focus.
Which agents is Menu Board Reel 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, rendered with HyperFrames (Apache-2.0) and animated with GSAP (Standard License), using the Saira Condensed and Caveat fonts (SIL Open Font License 1.1) and Yellowtail (Apache-2.0).
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.