# Prism Light Hero

> A dark hero section where a thick triangular glass prism floats beside your headline. A thin white beam comes down out of the dark, strikes one face with a small star of light and leaves the next face split into a fan of colours that runs across the page and lands on its far edge as a glowing band. The split is worked out with real refraction for each end of the spectrum, so when the beam's angle follows the pointer the fan swings and opens the way real light does. Dust motes glint only where the light reaches them, with soft bloom and a faint haze. The fan can be the full rainbow or your brand's own three colours, and the video loops without a seam.

- Output: Web, WebGL glass prism · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/prism-light-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 on macOS, Windows and Linux; 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). The effect itself is raw WebGL written into the page, with no library to load. Without the network, visitors see the effect in system fonts.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add prism-light-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/prism-light-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/prism-light-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/prism-light-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 dark website hero for our product with a glass prism splitting a white beam into a spectrum in our brand colours, the beam following the pointer, plus a looping video of it.