# Glass Orbs Hero

> A hero section where several glass spheres float in front of a bold poster drawn in code: a drifting gradient in the brand's two colours, a fine grid and a huge word scrolling in rows. Each sphere is traced as a real ball of glass in WebGL, so the poster shows inside it upside down and magnified, with the word running the other way, a thin rainbow at the rim, a studio reflection, a sharp highlight and a soft shadow with a spot of focused light. The spheres bob on springy loops and lean away from the pointer; in the recording a scripted pointer takes over, so the video loops exactly. You get a self-contained page, a paste-in embed, an SVG still for reduced motion and a frame-exact MP4.

- Output: Web, WebGL glass spheres · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/glass-orbs-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, and so does the word on the poster. Without WebGL visitors see the still.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add glass-orbs-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-orbs-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/glass-orbs-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/glass-orbs-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 website hero for our brand with glass spheres floating over a bold gradient poster of our name, refracting it upside down, plus a looping video of it.