Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/ossory, working in your browser. Opens in a new tab. Also: Verglas.

16-second example rendered by this skill from examples/ossory · 1280×720

Example settingswhat each example above was built from

examples/ossorypage.json
Brand
Ossory
Headline
Ossory · Colour grading for film colourists
examples/verglaspage.json
Brand
Verglas
Headline
Verglas · The time-series database for the edge

What you get

  • A whole landing page (bar, hero, features, product window, pricing, closing band, footer) in your words, numbers and links
  • Glass with real backdrop blur and an edge that catches the pointer's light, and a roaming light on touch screens
  • A product window built from your own numbers: list, metric, chart and table, tilting in and landing flat with three notes
  • Your own three lights and an editorial or technical type pairing, with the tokens and component rules written down
  • Designed phone layouts and a reduced-motion version where the light rests and everything is shown
  • Checks at 390, 768, 1024 and 1440 px for overflow, text size, AA contrast, clipping, focus rings, blur and reduced motion
  • A 1080p video of the scripted scroll with a pointer lighting the glass, rendered frame by frame
  • Open-source licenses for every part it builds on

Good fit

  • Developer tools and infrastructure get the technical pairing, as Verglas does in ice mint: a condensed grotesque with a mono, a terminal hero, a spec table and a live console.
  • Creative software, studios and hardware get the editorial pairing, as Ossory does in sodium amber: a serif with one lit italic word, a full-bleed film hero, a pricing ledger.
  • Teams that want glass done properly, with real blur, one light colour story and AA contrast checked inside every panel, instead of a frosted-card template.

Not for

  • Light themes: the system is dark by design and the build refuses a light ground
  • New sections or other layouts: the seven parts are fixed, the words, numbers, lights and type pairing are yours
  • A real screenshot of your app in the window: it is drawn from your numbers (a list, a metric, a chart, a table)
  • Checkout or forms: the buttons are links to your own pages

About this skill

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.

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.

Similar Skills

View all
New
video
Paper Technical LandingClaude CodeCodexCursor+3 more agents
New
video
Motion Sections KitClaude CodeCodexCursor+3 more agents

Details

Output
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
Needs
Node.js 18+, and Chrome for the checks; ffmpeg only for the video
Series
Landing Pages · 5 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

One page template rendered from page.json and one system style sheet, with the page's five look tokens (no framework, no libraries)A small inlined runtime that draws every frame from the scroll, the pointer and the clock (light, edges, reveals, tilt, glyphs, switch)Headless Chrome checks and a frame-stepped scroll recorder with a drawn pointer + ffmpeg

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Does the edge light work on phones?

There is no pointer on a phone, so a soft light roams slowly over the screen instead and the edges catch it as it passes. On a computer the light follows the mouse, and hands back to the roaming light after a few still seconds.

Can I use my own colours and fonts?

The three lights and the ground are yours (the build checks they are dark enough and bright enough for text). The type comes as two tested pairings, editorial and technical; other fonts are not a setting, because the sizes and spacing are drawn for them.

What happens with reduced motion?

Nothing moves on its own: the light rests, every section is shown, the product window lies flat and the film shows its poster. The edges still answer the mouse and the billing switch changes at once. The check fails if anything still drifts.

Which agents is Dark Glass Landing written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

the Dark Glass system, both examples and the kit, all written for Lookbk; the two hero films are Lookbk's own generated Loop Heroes footage. The fonts are from Google Fonts. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.