# Dye Drop Hero

> A hero section where drops of dye fall into clear water lit from behind, like ink photographed in a tank. Each drop punches down into a ring that rolls at its rim, trailing a hair-thin thread, then breaks up into curls inside curls and fine filaments as it drifts into the others. The dye absorbs the light like real dye, so where two colours meet they mix: indigo through yellow reads green. The pointer stirs the water with a soft swirl. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p video of it.

- Output: Web, Animated WebGL hero · page + embed + 1080p video
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/dye-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 WebGL: the shaders are inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts. Without WebGL visitors see the SVG still.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add dye-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/dye-drop-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/dye-drop-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/dye-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

> Build a Dye Drop hero for Madder & Weld, our natural-dye studio: pale backlit water, drops of indigo, weld yellow and madder red that bloom and mix behind the headline 'Three plants, every colour.', and record a 14-second loop for Instagram.