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

12-second example rendered by this skill from examples/northlight · 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 running drops, beads and passing cars
  • A seeded night city in up to five light colors, with every drop lensing it upside down
  • 13 documented effect settings: seed, rain, runners, drop size, blur, haze, sky, lights, traffic, a reflected lamp and copy dimming
  • 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
  • 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

  • Cinemas, record labels, bookshops and sleep or comfort apps can set an evening mood with drops running down a window in front of a city at night.
  • Brands with a deep night color can light the blurred city in up to five colors, with sodium lamps for warmth and their accent as neon.
  • Teams that need a trailer or launch clip can record a seamless 12-second loop of running drops and passing cars as a 1080p MP4.

Not for

  • Light or daytime brands: the build only accepts a deep night background
  • Showing a real product photo: the scene is a window, not a product
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section seen through a window on a rainy night. Beyond the glass a city sits out of focus: lit windows, sodium lamps, neon signs and cars sliding along a wet street, all turned to bokeh. On the glass, beads of condensation gather and drops run down in fits and starts, wiping clear trails and leaving small beads behind. Each drop is a tiny lens with the city upside down in it. The copy sits on the darker side of the pane, and the loop repeats without a seam every 12 seconds. Your agent sets your light colors, haze, rain, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

Example request

Build a Rain on Glass hero for Northlight Cinema's late shows: amber sodium lamps and cyan neon on a blue-black night, headline 'Rain outside. Films inside.', and record the video for the season trailer.

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 Canvas 2D city with depth-of-field bokehMotion 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 it on a light or daytime site?

No. The build only accepts a deep night background, such as navy, plum, deep green or near-black, and refuses lighter ones. The first light color, the street lamps, must also reach 3:1 on that background, and the text must reach 7:1.

Will the words stay readable over the lights?

Yes. The copy sits on the darker side of the pane, where copyDim (default 0.35) dims the city and drops, and the build checks the text against every light at that level. If they still fight, lower copyDim or raise the scrim. Contrast is checked at four widths.

What do visitors see without WebGL or with reduced motion?

Without WebGL they see an SVG still of bokeh and beads. With reduced motion they get one real frame of the window at 6 seconds. The city is painted in the browser, so there are no photos to host, and only the fonts load from a CDN.

Which agents is Rain on 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 rain effect, its shaders, the painted city, 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.