The page this skill built from examples/vesperline-radio, working in your browser. Opens in a new tab. Also: Saltmark type.

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

Example settingswhat each example above was built from

examples/vesperline-radiohero.json

Brand: Vesperline
Headline: Music for the hours after the city sleeps.
Badge: Independent night radio · since 2019
Colors: background #0b0a10 · ink #f3eee6 · accent #ff8a3d
Mode: dark
Fonts: Big Shoulders Display and Inter

examples/saltmark-typehero.json

Brand: Saltmark Type
Headline: Typefaces drawn for long reading.
Badge: Independent type foundry · Lisbon
Colors: background #0a0f1a · ink #eef2f7 · accent #5fe3c0
Mode: dark
Fonts: Fraunces and DM Sans

What you get

A self-contained index.html hero and an embed.html to paste into an existing site
A wall of your words in outline or dim fill, revealed in bright gradient under a pointer spotlight
A hidden line, like a date or a launch, that only shows under the light
A seamless 1080p MP4 loop and a poster
An SVG still for reduced motion and failures
Contrast and layout checks at four widths
Two complete example brands to copy from
Open-source licenses for every part it builds on

Good fit

Night venues, radio stations, festivals and cinemas whose brand already lives after dark and wants a hero that feels lit by hand.
Launches and teasers with one short secret worth finding, like an opening time or a product name, set as the hidden line.
Type foundries and studios that want their own letterforms to be the picture, shown as outlines until the light fills them.

Not for

Bright, airy pages where the dark wall would feel heavy
Long messages: the hidden line holds 24 characters
Heroes that need product photos or video footage
Pages that must show every word at once without interaction or motion

About this skill

A dark hero filled edge to edge with giant display type: the brand's words repeated and stacked into a wall, drawn as thin outlines or a dim fill, the rows sliding slowly in opposite directions. A soft circular spotlight follows the pointer and shows the same wall underneath in bright gradient fill, with a warm glow, faint film grain and a smaller second light trailing behind. One row carries a hidden line, a date, an offer or a launch, that only appears under the light. Without a pointer, and in the recording, the light rests on the hidden line, reads along it and tours the wall in a seamless loop. Radius, softness, colours, grain and the hidden words are all settings, and the headline stays readable over it.

Example request

Make a dark hero for our late-night radio station where a spotlight reveals our name in glowing type and uncovers the words On air 22:00.

How it works

You ask
Make a dark hero for our late-night radio station where a spotlight reveals our name in glowing type and uncovers the words On air 22:00.
Your agent
1. 1
  Collect the brand
  Every claim, price, date and spec in the copy, and in the hidden line, must come from the person.
2. 2
  Write hero.json
  Copy the closer example and replace everything: examples/vesperline-radio/hero.json (an independent night radio station, near-black page, a condensed sans wall in outlines, a vermilion to gold light, the hidden line "On air 22:00", copy on the left) or examples/saltmark-type/hero.json (a type foundry, deep navy page, a bold serif wall in a dim fill, a mint to violet light, the hidden line "New: Saltmark Text", copy on the right).
3. 3
  Build
  It lists every problem in hero.json at once (missing fields, text over its limit, a setting out of range, colours that don't contrast, a lit colour under 3:1, an unlit wall that would vanish or shout, a trailing delay longer than a quarter of the loop) and writes nothing until they're fixed.
4. 4
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text (the build has already checked the text against every colour the wall and the light can put behind it, after calm), names on every link and button, one h1.
5. 5
  Look at it
  They save out/still-1440x900.png and out/still-390x844.png, the live hero at 3 seconds, when the light is partway along the hidden line.
6. 6
  Record the video
  It steps the hero through 8 seconds at 30 fps at 1920×1080, drawing each frame at exactly its time, and writes out/preview.mp4 (H.264, for X, LinkedIn, Product Hunt or a README) and out/poster.png (the frame at 3 s).
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
You get
- out/index.html
- out/embed.html
- out/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png

What you need

Node.js 18 or newer. Nothing to install.
Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set CHROME_PATH if they don't).
ffmpeg, for the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_PATH).
At runtime, nothing but a 2D canvas: the drawing code is inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.

Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change; colour problems suggest a colour that works.
The light barely shows anything
The lit colours are too close to the background, or radius is small; take brighter colors, a larger radius or a lower softness.
The unlit wall is too loud
line is too close to theme.ink, or base is dim or both with a heavy face; take a darker line or base outline.

What’s in the download

SKILL.md17.6 KB
examples/
examples/saltmark-type/2.29 KBSaltmark Type, a type foundry, copy on the right · 2 files
examples/vesperline-radio/2.22 KBVesperline, a night radio station, copy on the left · 2 files
scripts/
scripts/effect/the wall and the light: effect.mjs (its settings, checks and the still picture), effect.js (the rows, the lit layer, the mask, the path, the grain and the calm, on a 2D canvas).
scripts/effect/effect.js19.3 KB
scripts/effect/effect.mjs10.9 KB
scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs, cdp.mjs), the pinned fonts (fonts.json), the pinned three.js catalogue (three.json, unused by this effect) and KIT.md, which explains them.
scripts/kit/build.mjs34.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/fonts.json5.42 KB
scripts/kit/KIT.md16.0 KB
scripts/kit/record.mjs8.11 KB
scripts/kit/runtime.js15.1 KB
scripts/kit/shell.css9.41 KB
scripts/kit/three.json6.35 KB
scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
scripts/check.mjs9.48 KBLookbk's checks, screenshots, colour maths and HTML writer.
scripts/chrome.mjs3.63 KB
scripts/color.mjs1.40 KB
scripts/inline.mjs1.67 KB
scripts/markup.mjs6.15 KB
scripts/record.mjs255 B
scripts/screenshot.mjs1.79 KB
NOTICE.md1.64 KBwhere the effect comes from, and the fonts it loads.
TESTED.json833 B

25 files · 179 KB · installs to ~/.claude/skills/spotlight-type-hero for Claude Code and ~/.agents/skills/spotlight-type-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Text on Path Hero+3

New

Dot Field Hero+3

Details

Output: Canvas 2D spotlight on a type wall · page + embed · 1080p loop
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series: Motion Heroes · 71 skills
For: Founder Marketer Designer Ecommerce seller
Updated: Nov 1, 2026
Checked: Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

Plain Canvas 2D (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg

Uses tools

FFmpeg Chrome Node.js

Good forProduct launch Brand Web design

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

Write a review

FAQ

What happens when nobody moves the pointer?

The light follows its own seamless loop. It rests at the start of the hidden line, reads along it, rests at the end, then tours the wall and comes back. The recorded video always uses this path, so every machine gives the same frames.

Will the headline stay readable when the light passes behind it?

Yes. Under the copy and the top bar the wall and the light are washed toward the background by the calm setting, 0.9 by default. The build checks the text against every colour the light can put behind it before it writes the page.

How long can the hidden line be?

Up to 24 characters. It is fitted to the space beside the copy, so 8 to 18 characters stays large. Longer lines get smaller, and a light that shows a word or two at a time makes the read feel like discovery.

Which agents is Spotlight Type 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 a plain 2D canvas, with no third-party libraries; fonts load from jsDelivr or Google Fonts under the SIL Open Font License. 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.