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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A seamless 12-second loop of turning rays, spinning rings of dots and a rippling sun
  • Two spot inks that overprint into a third colour, with misregistration, uneven toner and paper grain
  • 15 documented effect settings: paper, two inks, ray count and width, turn, sun size, sunset stripes, spin, ripple, screen size, misregistration, grain and copy dimming
  • An SVG still with the same burst and sun 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
  • 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

  • Festivals, concerts and summer events can get a gig-poster look, with rays in one ink and a striped sunset sun in another.
  • Food markets, restaurants, record labels and beach brands on a light paper-coloured page can show two inks overprinting into a third colour.
  • Teams announcing a line-up or launch can record a 1080p video that loops without a seam every 12 seconds.

Not for

  • Dark pages: the inks multiply on paper, so the build only accepts a light background
  • Quiet, minimal brands: a sunburst is loud by design
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section printed like a two-ink screen poster. A sunburst of rays in one ink is screened in round halftone dots, and the dots swell and shrink as the rays turn through them. A sun in the second ink is built of dots in rings that turn in opposite directions, with a ripple running outward, a halo of shrinking dots and poster-sunset stripes across its lower half. The sun ink sits slightly out of register and drifts, and both inks multiply on grainy paper. The loop repeats without a seam every 12 seconds. Your agent sets your paper, inks, rays, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

Example request

Build a Halftone Sunburst hero for Longlight, our music festival on the Isle of Bute: navy rays and a tomato-red striped sunset on cream paper, headline 'Three days of the longest light.', and record the video for the line-up announcement.

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)Halftone screening and multiplied spot inksMotion 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

Does it work on a dark background?

No. The inks multiply over the paper like real ink, so the build refuses a dark paper and asks for a light one. The ray ink must reach 2.2:1 on the paper and the sun ink 1.8:1. For a dark page, pick another hero.

Why do the rays shimmer on my phone?

The halftone dots can come close to the size of the phone’s own pixels. Raise the dot setting, the distance between dots from 6 to 28 px (default 12), so the screen stays coarser than the pixels. Dots are already drawn a little smaller on phones.

Will the text stay readable over the dots?

Yes. Behind the copy the dots shrink to a share of their size set by copyDim, default 0.25, and the build checks the text against both inks at that level. If the words still fight the dots, lower copyDim or raise the scrim. With reduced motion visitors get one still frame at 4 seconds.

Which agents is Halftone Sunburst 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 halftone print effect, its shader, 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.