13-second example rendered by this skill from examples/dailyfern-streak · 1280×720
Example settingswhat each example above was built from
examples/dailyfern-streakbrief.json
- Brand
- Dailyfern
- Format
- wide
- Date
- Tuesday, 4 March
- Headline
- Small habits, kept daily.
- Colors
- field #e8e2d6 · ink #1d201c · accent #e0592a · accent2 #3f6f5a
examples/ferrow-dinnerbrief.json
- Brand
- Ferrow
- Format
- tall
- Date
- Friday, 14 November
- Headline
- Dinner, door to door in 23 minutes.
- Colors
- field #121621 · ink #eef0f3 · accent #c8f560 · accent2 #7d93ff
What you get
- A vertical 1080×1920 or 16:9 1920×1080 MP4 with sound, from one field
- An original soundtrack with a whoosh on every card and the collapse, and a sting as the button lands, with nothing to license
- Cards that land on the beat, one on the drop, and a button that lands on the final hit
- 3 to 7 big, readable notifications with app name, title, message and time
- A counter tied to the stack that flips and punches with each card
- A rich lit field, a frosted glass card material and an original phone drawn in CSS
- A pasteable PROMPT.md for Claude Code or Codex, and two invented example briefs
- Open-source licenses for every part it builds on
Good fit
- An app launch where the notifications themselves show what the product does for people every day.
- A delivery, booking or fitness service that wants one Reels or TikTok ad built from its real status updates.
- A team that needs the same reel in 9:16 and 16:9 without opening an editor.
Not for
- Screen recordings of a real app
- Copies of a specific phone maker's lock screen
- Videos longer than about 17 seconds
- More than 7 notifications
- Projects with voiceover already timed
About this skill
A phone with a metal frame and a glass screen stands very close to the camera on a field of your brand colour lit by soft pools of your accents, cut to an original beat-synced soundtrack generated on your machine. The first notification is already on the lock screen at frame 0. Each later card slides in on its beat, frosted glass over a deep gradient wallpaper, with every line at least 3% of the frame's height and a haptic buzz of the whole phone, and one lands on the drop. A counter beside the clock rolls to the next number with every card. Then a hard cut turns the stack into one deck, which falls into place as your button on the music's final hit while your headline rolls up.
Example request
Make a vertical notification reel for our app: 5 notifications landing on a lock screen, our brand colours, ending on the headline and a button that says Download now.
How it works
Your agent
- 1
Get the copy and the format
Ask for anything you can't infer.
- 2
Pick colours
field: the background the phone stands on. - 3
Make the project and apply the brief
Write
brief.jsonin the project with the fields from steps 1 and 2. - 4
Check
"ok": truemeans it is ready to render. - 5
Look before you render
This writes PNG frames to
snapshots/, one just after each card lands, one on the end card and the last frame. - 6
Render
It renders with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(A1 to A11, see Sound effects and two-way sync), muxes it in as AAC through a true-peak limiter (-1 dBTP), and checks the MP4 has sound as long as its picture. - 7
Hand it off
Give the person the path to
renders/notification-stack.mp4and one still from step 5.
- 1
You get
- renders/notification-stack.mp4


What you need
- Node.js 22 or newer, and FFmpeg (with
ffprobe) on the PATH. FFmpeg also checks and muxes the music. - HyperFrames runs through
npx, pinned to the version this template was tested with:npx --yes hyperframes@0.8.192. - Chrome: the first render downloads a headless Chrome of its own. If
rendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
cdn.jsdelivr.net(GSAP) and, on the first render,fonts.googleapis.com(Inter and Outfit, cached after that in~/.cache/hyperframes/fonts). See Troubleshooting if either is blocked.
Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs, then shows a static frame, or reports
sub_timeline_script_failure.GSAP didn't load. If your network blocks
cdn.jsdelivr.net, runnpm i gsap@3.14.2in the project, copynode_modules/gsap/dist/gsap.min.jstoassets/vendor/, and point the<script src>inindex.htmlatassets/vendor/gsap.min.js.The clock and headline are in a plain system font.
The fonts didn't download. Run
checkonce with network access so HyperFrames caches Inter and Outfit, then render.The end card cuts off early, or the last card leaves too soon.
The brief changed the number of notifications after the length was set, for example through
--batch. Runapply-briefagain.
What’s in the download
- SKILL.md23.8 KB
- examples/
- examples/dailyfern-streak/972 Ba habit app, light, 16:9, four notifications,
lofi-chillat 84 bpm, 12.9 s. · 1 file - examples/ferrow-dinner/1.22 KBa food delivery service, dark, 9:16, six notifications, two app names,
upbeat-popat 112 bpm, 12.2 s. Both brands are invented. The previews on Lookbk are rendered from these. · 1 file - scripts/
- scripts/gate/the layout gate (
gate.mjs) and its small Chrome DevTools client (cdp.mjs). - scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2, the music and sound-effects generator, with its checker (
check.mjs, standards A1 to A11), muxer (mux.mjs), an empty CC0samples/manifest 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.0 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.mjs17.1 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs11.8 KBvalidates a brief, lays the reel out on the beat grid, generates the track, and writes it all into the template. No dependencies.
- scripts/beat-grid.mjs13.0 KBreads the
musicblock, predicts the bars and the drop, and runs beatgen. - scripts/render.mjs7.75 KBruns the layout gate, renders, checks the track, muxes it in and checks the MP4.
- template/the HyperFrames project.
index.htmlholds the markup, styles and declared variables;stack.jsfills it from the variables, works out the screen colours, lays out both formats and builds the timeline;hyperframes.json,package.json. - template/hyperframes.json318 B
- template/index.html25.1 KB
- template/package.json309 B
- template/stack.js22.0 KB
- NOTICE.md1.32 KBthird-party software this skill uses.
- PROMPT.md2.65 KBa prompt to give Claude Code or Codex to make a reel for your brand with this skill.
- TESTED.json6.17 KB
28 files · 381 KB · installs to ~/.claude/skills/notification-stack-reel for Claude Code and ~/.agents/skills/notification-stack-reel for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 9 to 17 s · 1080×1920
- Needs
- Node.js 22+, FFmpeg on the PATH and Chrome (HyperFrames downloads a headless Chrome on the first render), plus network access to load GSAP and the Inter and Outfit fonts once.
- Series
- Creator Kit · 2 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 1, 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 notifications can a reel have?
Between 3 and 7. The first is on screen from frame 0 and each later one slides in on a beat with a whoosh. The newest two stay fully readable; older ones tuck into a softened pile. The reel runs about 9 to 17 seconds, a whole number of bars, and the end card is its last bar.
Does it look like a real phone's lock screen?
No. The phone is a generic slab with a punch-hole camera, and the cards use their own layout: a lettered app tile, the app name and a time on one row, a bold title and a message of up to three lines. Nothing copies a phone maker's hardware or system screens.
Where does the music come from?
The bundled beatgen generator synthesises an original track in one of six styles for the exact length of the reel, with a seed for variation. Nothing is sampled, so there is nothing to license. Each card's slide-in, the collapse and the button landing on the final hit are laid out on its beat grid, with sound effects on them.
Which agents is Notification Stack 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 for the catalog: it renders with HyperFrames (Apache-2.0), animates with GSAP (Standard License), and sets type in Inter, Outfit and JetBrains Mono under the SIL Open Font License 1.1, with an original soundtrack from the bundled beatgen generator.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.