# Water Droplets Hero

> A hero section on a pane of frosted glass, with a bold poster behind it drawn in your colors: big discs, a tilted band, fine rules and one word set huge in your headline's typeface. Through the frost it is only soft color, but a few fat macro water drops cling to the glass, and each one is a clear lens with the poster sharp, small and upside down inside it, a dark rim, a caustic and a soft-box highlight. Heavy drops slide down in fits and starts, merge with the drops in their way like liquid and wipe clear trails where the poster shows sharp. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a 16-second 1080p loop that repeats without a seam.

- Output: Web, Animated WebGL hero · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/water-droplets-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`).
- Nothing else at runtime: the effect is plain WebGL inlined in the page, and the poster behind the glass is painted in the browser (no images to host). Only the fonts load from a CDN; without the network the page uses system fonts, and the poster word is set in them too. Without WebGL, visitors see the SVG still (soft colour and drops).

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add water-droplets-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/water-droplets-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/water-droplets-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/water-droplets-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 Water Droplets hero for Dewline's Glacier Water Serum: warm porcelain page, a coral, aqua and butter-yellow poster behind frosted glass, fat drops showing 'like glass' upside down, headline 'Skin that drinks like glass.', and record the 16-second loop.