# Sign-up Flow Film

> A 24 to 26 second film of your sign-up flow, told as a story. A live sign-up card in your colour fills itself in field by field while the camera eases in on each one: an email finished from a suggestion with Tab, a password whose strength meter climbs to Strong, a one-time code that arrives as a notification and fills digit by digit, a plan picked with a click and a terms box ticked, each with a green tick. The last button turns into a spinner, then a check with a burst, the card opens into your product's first screen and an end card lands. One brief renders a wide 16:9 film and a tall 9:16 one, with its own indie-electronic soundtrack.

- Output: Video, MP4 · 24–26 s · 1920×1080 or 1080×1920 · with music
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/signup-flow-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 screenshot its first screen. 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 signup-flow-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/signup-flow-film` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/signup-flow-film`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/signup-flow-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 Sign-up Flow Film for https://fernway.example: email and password, a 6-digit code by text, a pick between Everyday, Plus and Joint, then "Welcome, Ana" on our home screen. Render it 16:9 and 9:16.