# Letter Drop Hero

> Big, chunky letters of the brand's word fall from the top of the hero one after another, bounce, tumble and pile up on a shelf beside the headline. Each letter is solid, with a lit face, a darker extruded side, a soft shadow and a squash and spring back when it lands hard. A small rigid-body solver runs the whole loop once from a fixed seed with a fixed step, and every frame is looked up by time, so the recording is the same on any machine. Near the end of the loop the shelf drops open like a trapdoor, the pile slides away and the drop starts again, closing the loop exactly. On the live page the pointer shoves letters aside. Letters can be the glyphs themselves or toy blocks, drawn on a plain 2D canvas with no libraries.

- Output: Web, Rigid-body letter drop · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/letter-drop-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (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`).
- At runtime, nothing but a 2D canvas: the solver and the drawing code are inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add letter-drop-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/letter-drop-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/letter-drop-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/letter-drop-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 hero for our type foundry where the letters of our new typeface's name drop in and pile up beside the headline.