31-second example rendered by this skill from examples/tessera · 1280×720
Example settingswhat each example above was built from
examples/tesserabrief.json
- Kicker
- How it’s built
- Headline
- Every layer, one platform. one platform.
examples/lumenbrief.json
- Kicker
- Under the hood
- Headline
- Ship agents you can trust. trust.
What you get
- A 26–36 s MP4 at 1080p or 4K: 3 layers run about 26 s, 4 about 31 s, 5 about 36 s
- Glass layers with thickness, content shadows, a floor grid, depth of field and an accent rim light
- Labels in a column, their leader lines following each layer as the camera moves
- Every focus shot framed on the part of its layer that has content, measured while the film builds
- Two ways in: cut the layers from one screenshot with rectangles, or bring transparent layer exports
- A dark and a light look, and an original soundtrack with a sub drop on the explode and a slam on the snap-back
- Two made-up example films to start from (a dark Postgres platform, a light AI observability tool)
- Open-source licenses for every part it builds on
Good fit
- Databases, APIs, infrastructure and AI products can show what they are made of, one layer at a time, instead of a single flat screenshot.
- Teams launching a platform with three to five parts get a 26 to 36 second film from one brief and one screenshot, with music they may use anywhere.
- Dark-mode developer tools and light, paper-white SaaS products both fit, since the film ships a dark and a light look that take the brand color as the accent.
Not for
- Products with a single screen and no parts to explain (see Launch Film: Porcelain)
- Films longer than 36 seconds or more than five layers
- Vertical or square social cuts (16:9 only)
About this skill
A "how it's built" launch film where your interface comes apart in 3D. The flat UI tilts into perspective and explodes into three to five floating glass layers with real thickness and shadows, labels wire themselves to each layer as the camera orbits, then the film focuses on one layer per feature while the others lift away and blur. On the downbeat everything snaps back into the flat UI and an end card lands. It cuts the layers from one screenshot or uses your own layer exports, and writes its own beat-synced soundtrack.
Example request
Make an Exploded Stack film for https://tessera.example: the console, the data, realtime sync and the AI assistant as four layers, ending on "Now in public beta".
How it works
Your agent
- 1
Ask three things
It prints the title, description, headings, calls to action, colours and fonts, saves
site.json, and saveslogo.svgwhen the header has an inline SVG logo. - 2
Get the layers
A layer is a 16:10 picture of the whole interface (1440×900, or 2880×1800 for 4K) that is transparent everywhere except its own part, so the layers stack back into the finished UI.
- 3
Write the brief
Every claim must come from the product's own pages.
- 4
Make the film
It copies the template into
my-film/, applies the brief (and prints the beat sheet: when it explodes, snaps back and ends), writessoundtrack.wavon that beat sheet (an original cinematic electronic pulse: riser and sub drop on the explode, ticks on the labels, a whoosh per layer, a slam on the snap-back;--key Dchanges its key,--no-musicskips it) and rendersmy-film/renders/<name>-1080p.mp4. - 5
Check before you hand it over
Look at the sheet.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - Chrome, Chromium or Edge, for capturing screens. Set
CHROME_PATHif it isn't 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 of its own. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Inter Tight, JetBrains Mono) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked. - A render takes several minutes on a laptop (the 3D and the blur are drawn per frame). Plan on 5–15 minutes at 1080p.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.The film renders with plain fonts or stops before the first frame.
The render could not reach
fonts.googleapis.comorcdn.jsdelivr.net. Allow them, or setGSAP_FILEto a localgsap.min.js3.14.2 for GSAP.A focus shot is framed on the whole sheet instead of the content.
The film reads each layer's transparency to find its content. A JPG has none: use PNG, WebP or SVG for upper layers, or use
rectcuts.
What’s in the download
- SKILL.md11.9 KB
- examples/
- examples/lumen/1.32 KBa light, three-layer film for a made-up AI agent observability tool · 2 files
- examples/tessera/1.60 KBa dark, four-layer film for a made-up Postgres platform · 2 files
- scripts/
- scripts/apply-brief.mjs11.5 KBchecks the brief, copies the mark and layers, cuts pieces from a screenshot, writes the beat sheet,
storyboard.jsand the film length - scripts/capture.mjs23.9 KBreads a site (title, headings, colours, logo) and takes screenshots with your Chrome
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/make-film.mjs4.01 KBone command from brief to MP4 (template, brief, music, render)
- scripts/music.mjs13.9 KBwrites the original soundtrack with its hits on the beat sheet
- template/
- template/cues.json438 Bthe beat sheet, in beats
- template/film.css11.2 KBthe dark and light looks (glass, thickness, rim light, floor grid, grain)
- template/film.js25.0 KBthe 3D rig, the explode, the wired labels, the measured focus shots, the snap-back and the end card on one GSAP timeline
- template/hyperframes.json298 B
- template/index.html1.79 KB
- template/package.json198 B
- template/storyboard.js126 B
- NOTICE.md1002 B
- TESTED.json587 B
20 files · 114 KB · installs to ~/.claude/skills/exploded-stack-film for Claude Code and ~/.agents/skills/exploded-stack-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 26–36 s · 1080p or 4K · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Launch & Demo Films · 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
Do I need separate layer files for my UI?
No. You can give one 16:10 screenshot and a rectangle for each part, and the film cuts the pieces out and leaves a dashed slot on the base where each came from. Transparent PNG, WebP or SVG layer exports from your design file look best, and that is what the two examples use.
How long is the film and can I change it?
Length follows the number of layers on a 96 BPM beat sheet: 3 layers run about 26 seconds, 4 about 31 and 5 about 36. Every scene lands on a beat and the snap-back always lands on a bar line, so the music and the picture stay locked.
Where does the music come from?
music.mjs writes it from code: a cinematic electronic pulse with a riser and sub drop on the explode, ticks as the labels wire up, a whoosh for every layer and a slam on the snap-back, all on the same beat sheet as the picture. It is yours to use anywhere, and you can pass your own licensed track in the brief instead.
Which agents is Exploded Stack 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 made this package from scratch: the 3D rig, the measured focus framing, the wired labels, the two looks, the beat sheet, the music generator and the example layer art were written for it on HyperFrames.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.