# Liquid Lens Hero

> A hero section with a round lens of liquid glass drifting over a bold composition drawn in your colors: your brand's word set huge in rows, diagonal stripes, a drafting grid or gradient bands. The lens magnifies what sits under it, bends the world outside into its rim and splits the edge into a thin red, green and blue fringe, with a bright specular rim, a glint and a soft drop shadow. It follows the pointer on a spring and stretches like a drop as it moves; left alone, it glides along a figure eight that loops seamlessly. The pattern calms down behind the copy so the words always read. 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/liquid-lens-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`).
- Internet access when the page is opened, for the fonts only (jsDelivr at pinned versions with integrity hashes, or Google Fonts). The effect itself is inlined: no libraries. Without the fonts, the page and the wordmark use system fonts; it still works.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add liquid-lens-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/liquid-lens-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/liquid-lens-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/liquid-lens-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 Liquid Lens hero for Lumalto's new Lumalto Grotesk typeface: warm paper page, the word Lumalto set huge in black, orange, outlined and blue rows, a glass lens drifting over them, headline 'Every curve, under the glass.', and record the 12-second loop.