# Glass Metaballs Hero

> A hero section with a cluster of clear liquid glass beside your headline. A heavy core drop and a ring of smaller droplets fuse into one body like mercury, stretch into necks, pinch apart, fly out and fall back in, each on its own timing. The glass refracts a wall of bold diagonal stripes in your colors: the stripes bend through the thick middle, squeeze into the rim and split into a thin red, green and blue fringe, with a fresnel sheen, a bright rim, a softbox highlight and a soft shadow with a caustic on the wall. The pointer leans the glass a little; the video follows a scripted loop that closes exactly. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a 1080p loop.

- Output: Web, Animated WebGL hero · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/glass-metaballs-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 shader is 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 still.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add glass-metaballs-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/glass-metaballs-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/glass-metaballs-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/glass-metaballs-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 Glass Metaballs hero for Orvane, a fluid solver for motion designers: near-black navy page, indigo and pale blue stripes, clear icy glass droplets fusing and splitting beside the headline 'Liquids that behave like liquids.', and record the 12-second loop.