# App Preview Film

> A 25-second vertical preview film for a mobile app. A phone turns in a studio while your screens play four or five scenes, each with a big caption that lands word by word on the beat and a real gesture: a tap with a ripple, a swipe to the next screen or a flick that scrolls a long page. One card lifts out of the phone toward the camera, then an end card shows your icon, name, tagline and a download button over three of your screens. It comes with its own beat-synced soundtrack and sound effects.

- Output: Video, MP4 · 25 s · 1080×1920 · with music
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/app-preview-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` (Bricolage Grotesque and Inter) and `cdn.jsdelivr.net` (GSAP). See Troubleshooting if either is blocked.
- The app's screens: real screenshots from the phone (any modern phone, portrait), or captures of a mobile web app (step 2). One screen per scene, plus an `after` screen for a tap or a swipe, and one tall full-page screenshot for a scroll scene.
- The app icon as a square SVG or PNG (512 px or more).
- Music is optional: without your own track, `music.mjs` writes one.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add app-preview-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/app-preview-film` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/app-preview-film`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/app-preview-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 an app preview film for our habit app Morrow from these five screenshots: check off a habit, swipe to the run splits, scroll the year and lift the streak card.