Rain

Installation

Usage

Copyimport { Rain } from "@/components/dithercn/rain";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Rain className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

The scene has two layers. Behind the glass, the city is a few big, soft discs of out-of-focus light, each in one of the palette's colours after the paper. Each is full in the middle and thins out to its edge. There are more of them low down along the street than up in the sky, over a faint glow that rises from the street, and they sway very slightly, as if the camera breathed.

On the glass, a scatter of beads sit still, and every so often a new one lands. Each bead is a tiny lens: it shows the light behind it upside down, shrunk and brighter, inside a dark rim. Just inside the rim it catches an arc of light on the side facing the brightest light near it, longer the brighter that light is, a short glint across from it, and a faint line round the rest of its edge. So a bead over a light glows in that light's colour, ringed in dark, and a bead over the dark sky is only its arc, glint and faint outline, each one turned its own way. A few bigger drops gather water for a moment, then slide down at an easy, uneven pace, slowing almost to a stop now and then and running on, stretching as they run. Each leaves a wavering wet trail, widest just behind the drop, where the film of water either side of it softly bends the lights, and tapering to a thin, dim thread higher up as it dries. The drop wipes the beads off its path; the beads come back one by one as the trail dries.

The lights scale with the box. The drops are measured in dither cells, so they keep their size on a phone and a wide screen shows more of them.

Examples

City lights

Red tail lights and orange street lamps, a brighter glow, a slightly higher scale for more, smaller lights and more drops give a busy street seen through a wet window.

Behind a headline

fade={1} clears the drops from an oval in the middle of the box and dims the lights behind it, as if someone had wiped the glass, so the text sits on dark, quiet ground. A lower glow keeps the lights around it calm.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame, with drops caught mid-slide and their trails behind them, and stops.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a still SVG of the same window: soft discs of light over the street's glow, beads ringed in dark with their arcs turned towards the lights, and a few big drops with their tapering trails, in the same colours.
• On a light theme the paper is light and the lights are drawn in ink, like a printed negative. Pass a dark first palette colour, or set className="dark" on a wrapper, for night on any theme.
• Every cell checks the nine nearest lights once, its own two bead squares and two sliding drops, with no loop over every drop. The colour pass repeats that work. See Performance.