# Scroll Film Hero

> An animated hero section where scrolling plays your own film. The hero pins, and your clip scrubs forwards and back with the scroll, cut into a frame sequence by an ffmpeg script that also weighs it against a frame budget. At up to six scroll stops a callout rises in over the film: a short headline, a stat that counts up and an optional pin on the subject. A player bar shows the frame, the chapter ticks and progress. The film sits in a rounded viewfinder beside your headline or bleeds behind the whole hero. Your agent writes one hero.json with your colours, fonts, logo and words, checks it at four widths and records a smooth 1080p video of the scripted scroll. The examples' aerial footage is rendered by the package itself in three.js.

- Output: Web, Scroll-scrubbed film hero · page + embed + frames · 1080p video
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/scroll-film-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- ffmpeg, to cut your video into frames and to record the preview video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`). WebP frames need an ffmpeg with libwebp (most builds); otherwise use `--format jpg`.
- Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set `CHROME_PATH` if they don't).
- The brand's video: a short clip (5–20 s is ideal) where the camera moves steadily. MP4, MOV or WebM; anything ffmpeg reads.
- Internet access when the page is opened, for the fonts only (jsDelivr, pinned with integrity hashes). Only `scripts/footage.mjs` loads three.js, and only on your machine.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add scroll-film-hero
```

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/scroll-film-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/scroll-film-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/scroll-film-hero` 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 licences: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Build a Scroll Film hero for Marram Vans from our drone clip of the coast road: cut it into frames within budget, add callouts at the pickup, Corran Bay and Hale Point, and record a 1080p video for the launch post.