# Dot Field Hero

> A hero filled with thousands of small dots that behave like iron filings near a magnet. Dots near the cursor are pushed aside, grow and light up in the accent colour, then spring back past home and settle, so every pass leaves soft rings behind it. A slow travelling wave breathes through the grid even when nobody touches it, and the brand's short word or mark can be set in finer dots that gather from a scatter at the start of each loop. Without a pointer, and in the video, a virtual cursor glides on a closed path, so the motion loops exactly. Plain Canvas 2D with no libraries, on dark or light pages, with the field dimmed under the copy. It ships as a page, a paste-in embed and a frame-exact 1080p loop.

- Output: Web, Canvas 2D dot field · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/dot-field-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 effect is inlined in the page and loads no libraries. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts, and the word is set in the system font too.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add dot-field-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/dot-field-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/dot-field-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/dot-field-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 our homepage hero a field of dots that ripple away from the cursor and spell our name in mint on navy.