# Before After Reveal

> A before and after comparison film with its own original music, for redesigns, photo edits, room makeovers and data cleanups. You give it 2 to 4 pairs of pictures and a one-line caption for each. A soundtrack generated on your machine sets the cut: each pair wipes in on a downbeat, and on the next one a grainy blade of light sweeps across and eases back, so both sides rest in view. Before and After labels ride inside the frame on their own sides, so the line uncovers one and covers the other, and a serif caption names each change. The same line lays a brand card over the end on the track's final hit. It renders 16:9 at 1920×1080 or square at 1080×1080, and has placeholder pairs of its own: rendered photographs of a room, a house and a lake, and three screens drawn in code.

- Output: Video, MP4 · 9.4–16.9 s · 1080p or 1080×1080
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/before-after-reveal

## What you need

- Node.js 22 or newer and FFmpeg 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. If `render` says Chrome is missing, run `npx --yes hyperframes@0.8.192 browser ensure` once.
- Network access to `cdn.jsdelivr.net` (GSAP) and `fonts.googleapis.com` (Instrument Serif, Inter Tight, JetBrains Mono). See Troubleshooting if either is blocked.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add before-after-reveal
```

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/before-after-reveal` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/before-after-reveal`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/before-after-reveal` 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 before and after video of our dashboard redesign and our import cleanup, square for Instagram, ending on our brand card with the URL.