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

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

Example settingswhat each example above was built from

examples/vesperhero.json
Brand
Vesper Room
Headline
LIGHT WRITING
Colors
background #060708 · ink #eef3ea · accent #9b7bff
Mode
dark
Fonts
Sora and Inter
examples/haldehero.json
Brand
Halde
Headline
Printed in passing light.
Colors
background #f1ede4 · ink #1c1a26 · accent #5b34f0
Mode
light
Fonts
Fraunces and Inter

What you get

  • A self-contained index.html hero page in your colours, fonts and copy
  • An embed.html section to paste into an existing site
  • An ordered Bayer dither at whole device pixels with a dithered palette, smoke and beam haze
  • 4 corner lasers that write, blank and leave a 2-stage afterglow on the letters, with sparks and speckle
  • A dark phosphor wall or a light photochromic paper version
  • Checks at 390, 768, 1024 and 1440 px for text size, contrast, clearance under the bar and the old template
  • A frame-exact 12-second 1080p MP4 that loops, and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Clubs, music nights and venues get a first screen that looks like their own room with the lasers running.
  • Print studios and lighting brands can show their headline being written in light on paper or phosphor.
  • A launch team that needs the live hero and a looping clip for social posts gets both from one hero.json.

Not for

  • Long headlines: 8 characters a line in the type-effect layout
  • Pages that need a product photo in the first screen
  • Visitors without WebGL see a still picture and the plain headline
  • Calm, quiet brands that want no motion

About this skill

A website hero drawn as a wall of 1-bit phosphor in a dark room, swept by 4 lasers from the corners. Smoke, beam haze, room light, the afterglow and the headline all pass through one ordered Bayer dither at whole device pixels, and each dot takes a single pure ink; only the white-hot laser cores stay smooth. The beams write on the forward stroke and blank the flyback, so the letters they cross spark, speckle and turn green, then fade back in 2 stages. The laser nearest the pointer aims at it on a spring. A light version runs the same rig on photochromic paper with an editorial grid. The rig comes round every 12 seconds, so the video loops exactly.

Example request

Use the dither-laser-hero skill to build a hero for our late-night club: our 2-word headline printed into a 1-bit phosphor wall that 4 violet lasers write on, our lede and one call to action, plus a 12-second 1080p loop.

Similar Skills

View all
New
web
Liquid Lens HeroClaude CodeCodexCursor+3 more agents
New
web
Day NightClaude CodeCodexCursor+3 more agents

Details

Output
WebGL dither and laser hero · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 77 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

Raw WebGL1 with two fragment shaders, no librariesThe headline drawn into the dither from the page's own layoutMotion Heroes kit v2 (type-effect and editorial compositions)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forBrandProduct launchWeb design

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

Write a review

FAQ

Is the headline still real text?

Yes. The page keeps the real headline for readers, search and screen readers; the letters you see are drawn into the dither from its exact layout. Before the scene starts, and without WebGL, the plain headline shows.

Does the dither stay sharp on a slow phone?

Yes. Each dither cell is a whole number of device pixels and the canvas is never smoothed, so when the kit draws fewer pixels on a slow device the grain only gets larger, never blurred.

What do the lasers do without a pointer, and in the video?

They run the rig: each sweeps, writes and blanks on a fixed rhythm that comes round every 12 seconds, so a 12-second video loops without a seam. On a live page the nearest laser aims at the pointer on a spring.

Which agents is Dither Laser 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 third-party library; the fonts load from pinned Fontsource packages under the SIL Open Font License 1.1. 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.