# Dark Glass Landing

> A complete landing page in a strict dark glass design system, built from one page.json: a near-black ground with slow volumetric light behind it (three drifting orbs and a beam), layers of translucent glass with real backdrop blur, and a hairline edge on every panel that lights up where the pointer is. Every section has at least two layouts, so two pages never share a skeleton: the hero is a split or a full-bleed film with the glass card crossing the end of the headline so the type blurs through it, or a stack with a terminal strip and the card on its corner; features are a six-tile bento where each tile carries a micro drawing of the feature (a vectorscope, a node graph, print curves) or four tiles over a spec table; the product is a data console or a filmstrip window that tilts back in perspective and lands flat, with three glass notes in its gutter that never cover its data; pricing is three cards or a ledger of rows with a monthly/yearly switch; the close ends on a full-width wordmark or a compact centred band. Each page chooses its own three lights and one of two type pairings, so it never reads as a purple SaaS template: Ossory, a colour grading suite, is sodium amber and Instrument Serif over lanterns on a lake; Verglas, an edge database, is ice mint and condensed Bricolage Grotesque over kelp in shafts of light. The tokens and component rules ship in SKILL.md; the build checks every length and every light, the check tests four widths for overflow, text size, AA contrast, clipping, focus rings, real blur, the pointer light and reduced motion, and a recorder makes a 1080p video of the scroll with a drawn pointer.

- Output: Video, A whole landing page in one dark glass system · real backdrop blur, pointer-lit edges, volumetric light · two layouts for every section · two art directions with different skeletons · 1080p video of the scroll
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/dark-glass-landing

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg for the video only (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- Internet access when the page is opened, for the Google Fonts of the pairing. Without them system fonts stand in.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add dark-glass-landing
```

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/dark-glass-landing` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/dark-glass-landing`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/dark-glass-landing` 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

> Use Dark Glass Landing to build our launch page: our three lights are copper, smoke blue and bone, technical type, our six features, the dashboard numbers from the screenshot, three plans and our footer links.