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

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

12-second example rendered by this skill from examples/ardenne · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A rose window, a lancet or three lancets in 2 to 7 of your glass colors, the same window for the same seed
  • A seamless loop: panes kindling, a sweep of sunlight, colored shafts, dust and a pool of light on the floor
  • 17 documented effect settings: seed, frame, petals, panes, glass, sun, lead, stone, cycle, sweep, shafts, pool, dust, wall, size and copy glow
  • An SVG still for no WebGL, and one real frame for reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, with the light capped behind the copy
  • A frame-exact MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
  • Open-source licenses for every part it builds on

Good fit

  • Glass and craft studios, churches and chapel venues can set a glowing rose window or lancet in a dark stone wall beside their words.
  • Hotels, museums and architecture practices with a dark, rich palette can show colored shafts of light falling into the room beside the headline.
  • Brands with 2 to 7 jewel-tone colors can cut a window from them, and the same seed always cuts the same window.

Not for

  • Light or daytime brands: the build only accepts a deep background, where the glass can glow
  • Reproducing a particular real window or a figurative design: the glass is abstract and generated
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section with a leaded stained-glass window set in a dark stone wall: a rose window with stone spokes and foils, a pointed lancet, or three lancets side by side. The glass is a seeded tiling of hand-cut-looking panes in your glass colors, each with its own streaks and seeds, held by lead and tracery. The panes kindle from the center, then a band of sunlight sweeps across the glass: the panes flare, colored shafts fall into the room, dust turns in the beams and the window's pattern lands on the flagstones. Your agent sets your glass colors, fonts, logo and words, checks contrast at four widths and records a seamless 12-second 1080p loop.

Example request

Build a Stained Glass hero for Ardenne Glass, a leaded-glass studio: rose window in gold, cobalt, ruby and emerald on near-black, headline 'Light, set in lead.', and record the 12-second loop.

Similar Skills

View all
web
Aurora Curtain HeroClaude CodeCodexCursor+3 more agents
web
CRT Terminal HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated WebGL hero · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL 1 shaders (no libraries)Seeded Voronoi glass with lead and stone traceryMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Can I use a light background?

No. The build refuses a light background, because lit glass only glows against a dark interior, so use a deep near-black, ink-blue or aubergine page. Each glass color must also stand out from the background at 1.6:1, and the stone tracery must differ from it at 1.3:1.

Can it reproduce our real window or a figurative design?

No. The glass is an abstract, seeded Voronoi tiling of panes, not a copy of a particular window or a picture of figures. You choose the frame (a rose, one lancet or three lancets), 6 to 16 sectors for the rose, how fine the panes are and the glass colors.

Will the light make my headline hard to read?

The shader caps the light behind the copy at copyGlow, 0.05 to 0.4 of the brightest glass color (default 0.16), and the build checks the text against that cap. If words still sit on colored light, lower copyGlow or shafts. Reduced-motion visitors get one real frame at 6 seconds.

Which agents is Stained Glass Hero 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

Lookbk wrote this package: the stained-glass effect, its shaders, the tracery, the light shafts, the Motion Heroes kit and the examples. No third-party code is included. 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.