32.5-second example rendered by this skill from examples/halo · 1280×720
What you get
- A 27.5 s (three beats) or 32.5 s (four beats) MP4 at 1080p or 4K, every move on a 96 BPM beat
- Glass that bends the footage at its rim like thick glass, with a moving sheen, a specular edge and a soft caustic glow
- Widgets that morph into full panels of your UI, built from a glass kit of tiles, rings, bars, sliders, toggles and charts, or from your screenshots
- Numbers that roll, bars and rings that fill, toggles that flip with a tick, and a notification that stretches into a card
- Two Lookbk footage loops for the background, or your own clip, or a gradient mesh in your color
- An original ambient-pop soundtrack written by code, with a chime on every morph, free to use
- Open-source licenses for every part it builds on
Good fit
- App teams launching a new version get a tour film with music from one brief, each feature a glass widget that grows into a full panel.
- Smart home, weather, finance or health apps can show readings that roll up, rings that fill and switches that flip on the beat.
- Teams without footage still get depth, because the glass floats over a Lookbk footage loop or a brand-color mesh, or their own clip.
Not for
- Developer tools whose story is a command line (see Terminal Launch Film)
- Long walkthroughs: it shows three or four features, each for one 4-second panel
- Vertical or square social cuts (16:9 only)
About this skill
A product tour made of liquid glass. Frosted panels with real refraction float in depth over a moving background film: your product card shrinks into a glass nav pill, three or four glass widgets rise and dock, then each widget morphs into a full panel of your UI while numbers roll, bars fill, sliders slide and toggles flip on the beat. A notification pill can stretch into a card and get its button pressed, and the film ends on a glass end card. The background is one of two Lookbk footage loops (a cliff villa at dusk or a cabin under the aurora), your own clip, or a gradient mesh in your color, with its own ambient-pop soundtrack and a glassy chime on every morph.
Example request
Make a Glass UI Tour Film for our smart-home app Halo at https://halo.example: four beats (lights, climate, the front door with a "Sam is at the front door" notification, energy), the cliff villa background, and end on "Halo 2 is here".
How it works
Your agent
- 1
Ask four things
What is the product, and what is the one line that sums it up?
- 2
Read the product
It prints the page's title, description, headings, calls to action, colours and fonts, saves them to
site.json, and saveslogo.svgwhen the header has an inline SVG logo. - 3
Write the brief
Start from
examples/halo/brief.json(four beats, golden-hour footage) orexamples/northlight/brief.json(three beats, aurora footage). - 4
Build the panels
A panel file is a fragment of HTML that fills the panel's 888×528 content area.
- 5
Make the film
It copies the template into
my-film/, applies the brief (which times every move on the beat sheet and prepares the background), writessoundtrack.wavon those same times, applies the brief again with the track, and rendersmy-film/renders/<name>-1080p.mp4. - 6
Check before you hand it over
Look at the sheet.
- 1
You get
- cliff.mp4
- aurora.mp4
What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - 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 and Inter) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked. - Chrome, Chromium or Edge for
capture.mjs, if you want to read the product's site or take screenshots. SetCHROME_PATHif it isn't in the usual place. - Music is generated by
scripts/music.mjs. You can bring your own licensed track instead.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
apply-brief lists problems.
Each line names the field and its limit. The limits keep every line on one line at the film's type sizes.
The glass looks flat, with no blur.
The renderer did not apply
backdrop-filter. HyperFrames 0.8.192 with its own headless Chrome does; an old system Chrome may not. Render with the pinned version, and runbrowser ensureif needed.The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.
What’s in the download
- SKILL.md15.1 KB
- examples/
- examples/halo/10.2 KBfinished briefs and panels to start from · 6 files
- examples/northlight/8.98 KB5 files
- scripts/
- scripts/apply-brief.mjs13.2 KBchecks the brief, times the film on the beat sheet, cleans and copies the panels, prepares the background and writes
storyboard.js,cues.jsonandsfx.json - 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.mjs3.51 KBone command from brief to MP4 (template, timing, music, render)
- scripts/music.mjs14.3 KBwrites the original ambient-pop soundtrack, with sound effects on the cue sheet
- template/
- template/film.css15.8 KBthe glass material and the glass UI kit for panels
- template/film.js32.2 KBthe glass, the refraction maps, the morphs and the whole film on one GSAP timeline
- template/hyperframes.json298 B
- template/index.html2.27 KB
- template/package.json197 B
- template/storyboard.js78 B
- NOTICE.md1.30 KB
- TESTED.json909 B
26 files · 147 KB · installs to ~/.claude/skills/glass-ui-tour-film for Claude Code and ~/.agents/skills/glass-ui-tour-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 27.5 or 32.5 s · 1080p or 4K · with music
- Needs
- Node.js 22+ and FFmpeg
- Series
- Launch & Demo Films · 8 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 have to animate anything?
No. The film is timed on a 96 BPM cue sheet: a 3-bar intro, 2 bars per beat and a 2-bar end card. You write a brief with your name, mark, color and 3 or 4 beats, plus one small HTML file per panel built from the glass kit (or a screenshot), and data- attributes set what rolls, fills, slides and flips. make-film.mjs renders the MP4.
Is the glass real refraction or just a blur?
It is refraction. Each panel runs the footage behind it through an SVG displacement map made for that panel's size and corner radius, so the picture bends at the rim, then blurs, saturates and darkens it so the text reads. A specular rim, a moving sheen and a caustic glow are drawn on top.
Where does the music come from?
music.mjs writes it: an ambient-pop track at 96 BPM with pads, an electric piano, a plucked arpeggio and soft drums, plus a glassy chime on every morph, a tick on every toggle and whooshes on the big moves, on the same cue sheet. It is generated by code in the package, so you may use it anywhere. You can pass your own licensed track in the brief instead.
Which agents is Glass UI Tour 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 glass material with its refraction maps, the widget-to-panel morphs, the notification card, the glass UI kit and the ambient-pop music generator were written for it on HyperFrames, over footage loops Lookbk made for its scroll-page skills.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.