# Rain on Glass Hero

> A hero section seen through a window on a rainy night. Beyond the glass a city sits out of focus: lit windows, sodium lamps, neon signs and cars sliding along a wet street, all turned to bokeh. On the glass, beads of condensation gather and drops run down in fits and starts, wiping clear trails and leaving small beads behind. Each drop is a tiny lens with the city upside down in it. The copy sits on the darker side of the pane, and the loop repeats without a seam every 12 seconds. Your agent sets your light colors, haze, rain, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

- Output: Web, Animated WebGL hero · page + embed + 1080p video
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/rain-on-glass-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 city is painted in the browser (no photos to host). Only the fonts load from a CDN; without the network the page uses system fonts. Without WebGL, visitors see the SVG still (bokeh and beads).

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add rain-on-glass-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/rain-on-glass-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/rain-on-glass-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/rain-on-glass-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 Rain on Glass hero for Northlight Cinema's late shows: amber sodium lamps and cyan neon on a blue-black night, headline 'Rain outside. Films inside.', and record the video for the season trailer.