# Soda Fountain Hero

> A website hero on five seconds of generated footage: at a pastel pink-and-mint 1950s soda fountain, a felted lamb in a paper soda-jerk hat sets a cherry on a towering sundae while the camera pushes in. A giant two-line headline in a fat, round 1950s face sits behind the lamb and the sundae, which are cut out of every frame and drawn over the words, so the end of the first line tucks under the sundae; its letters drop in like scoops, a red script line is written on above it, and a cherry lands as the full stop just as the lamb tops the sundae. Around it: a scalloped wordmark badge and links, a candy-stripe button, a cherry-red main button, a little fountain menu card with prices on dotted leaders, and film grain. Your agent writes one hero.json with your words and links; the build checks every length and writes a page and an embed, and a recorder makes a 1080p MP4 with sound.

- Output: Web, Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/soda-fountain-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg for the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- A web server for the page. Opened straight from disk (`file://`) browsers won't let the page draw the film, and it shows the still; `node scripts/serve.mjs out` serves it on localhost.
- Internet access when the page is opened: GSAP and the fonts load from jsDelivr (pinned, with an integrity hash) and Google Fonts. Without GSAP the hero shows its still with every word in place.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add soda-fountain-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/soda-fountain-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/soda-fountain-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/soda-fountain-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 licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Make a Soda Fountain hero for our bakery's ordering site: script line 'Get the', giant lines 'Sundae' and 'to go', our three bestsellers and prices on the menu card, our links and buttons, and record the video for our launch post.