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/halcyne, working in your browser. Opens in a new tab. Also: Ordalis.

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

Example settingswhat each example above was built from

examples/halcynehero.json
Brand
Halcyne
Headline
Every frame, in its true spectrum
Badge
Colour grading · Release 4
Colors
background #07080c · ink #f4f1ea · accent #ffd27a
Mode
dark
Fonts
Fraunces and Inter
examples/ordalishero.json
Brand
Ordalis
Headline
Read the river by its light
Badge
Spectral sensing for water
Colors
background #040b0d · ink #e8faf5 · accent #3ee6c1
Mode
dark
Fonts
Space Grotesk and IBM Plex Sans

What you get

  • A self-contained index.html hero page in your colours, fonts, logo and copy
  • An embed.html section to paste into an existing site
  • A glass prism splitting a beam into a fan that lands as a glowing band on the page edge, its angle following the pointer
  • A full rainbow or a three-colour brand spectrum, with dust, bloom and haze you can tune
  • Left, right or centred layouts, with the prism above the copy on phones
  • A layout and contrast check at 390, 768, 1024 and 1440 px, and an SVG still for reduced motion and browsers without WebGL
  • A frame-exact 1080p MP4 that loops seamlessly, and a poster image
  • Open-source licenses for every part it builds on

Good fit

  • Colour grading, photo and imaging software can show light breaking into colour beside a headline about getting colour right.
  • Sensing, optics and science companies can tint the fan to their own brand colours for a calm, technical first screen.
  • A product team that needs a looping hero video for a launch post as well as the live page gets both from one file.

Not for

  • Light or pastel pages, since the build refuses a background that is not near-black
  • Heroes built around a product photo or a 3D model of your product
  • Pages that must work without JavaScript or WebGL beyond a still picture
  • Long lit phrases in the headline, since the spectrum underline keeps the phrase on one line

About this skill

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.

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.

Similar Skills

View all
New
web
Glass Orbs HeroClaude CodeCodexCursor+3 more agents
web
Mesh Gradient Grain HeroClaude CodeCodexCursor+3 more agents

Details

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

Generates with

Raw WebGL1 shaders, no librariesSnell's law refraction worked out per frameMotion Heroes kitHeadless Chrome checks and frame-stepped recorder, ffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Is the way the light splits physically accurate?

The fan's angles come from Snell's law, worked out every frame for the red and the violet end of the spectrum as the beam enters and leaves the glass. The glass's dispersion is exaggerated so the fan reads at a glance, and the bloom and haze are a stylised picture.

Can the spectrum use our brand colours instead of a rainbow?

Yes. Set spectrum to brand and pick bandStart, bandMid and bandEnd. Each must reach 3:1 on the background. A strong colour at each end with a pale one in the middle reads best, such as teal, mint-white and violet.

How does the pointer change it, and what happens in the video?

Moving the pointer swings the beam's angle, and the fan follows. Before anyone moves it, and in the recording, the beam follows a slow scripted swing that comes back to its start every 12 seconds by default, so the video loops without a seam.

Which agents is Prism Light 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 from scratch on raw WebGL1 with no libraries; one small hash function is adapted from Dave Hoskins' Hash without Sine (MIT licence). 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.