# Glass UI Tour Film

> 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.

- Output: Video, MP4 · 27.5 or 32.5 s · 1080p or 4K · with music
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/glass-ui-tour-film

## 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. If `render` says Chrome is missing, run `npx --yes hyperframes@0.8.192 browser ensure` once.
- Network access to `fonts.googleapis.com` (Inter Tight and Inter) and `cdn.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. Set `CHROME_PATH` if it isn't in the usual place.
- Music is generated by `scripts/music.mjs`. You can bring your own licensed track instead.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add glass-ui-tour-film
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/glass-ui-tour-film` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/glass-ui-tour-film`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/glass-ui-tour-film` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## 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".