# Mesh Gradient Grain Hero

> A hero section on a soft, slowly drifting mesh gradient: three to six of your colors blend into each other in linear light, folded by a gentle warp, with a calm patch held behind the copy so the words always read. A pane of frosted glass floats beside the copy, a disc or a pill, and bends the gradient behind it: the view inside flips and magnifies, the edges split into a faint spectrum, a bright rim and a soft highlight catch the light, and optional ribs fluted into the glass slice it into strips. Fine film grain at 24 frames a second sits over everything. Your agent sets your colors, fonts, logo and words, checks contrast at four widths and records a seamless 12-second 1080p loop.

- Output: Web, Animated WebGL hero · page + embed + 1080p video
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/mesh-gradient-grain-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 hand-written WebGL inlined in the page. Only the fonts load from a CDN; without the network the page uses system fonts.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add mesh-gradient-grain-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/mesh-gradient-grain-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/mesh-gradient-grain-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/mesh-gradient-grain-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 Mesh Gradient Grain hero for Stillwater, a breathwork app: peach, rose, sage, cream and periwinkle on warm paper, a glass disc beside the copy, headline 'Breathe out the whole day.', and record the 12-second loop.