Breathing Halo Hero
A first screen in a near-black jade room lit by two soft, grained halos in WebGL: the lead one breathes on a slow cycle and leans toward the pointer with a 900ms settle, and the serif headline warms where the light sits behind it.
WebGL20 deps1 file · 30 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* BreathingHaloHero — a first screen in a jade room lit by breathing halos.
*
* Two soft, grainy halos (WebGL2) light a near-black jade room. The lead
* halo breathes on a slow cycle (10s by default) and leans toward the
* pointer with a 900ms settle, like a lamp someone is carrying; the other
* drifts on its own 45s loop. The grain lives in the light, not on the page.
* The serif headline catches the light: a clipped copy of it is lit where
* the lead halo sits behind the letters. Line breaks stack the title and
* *asterisks* set words in italic. The calls to action are the kit's
* SoftGlowButton.
*
* Without WebGL2 the halos are CSS radial gradients. Renders only on
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The first screen of the Diffused Glow kit: a treatment room at night. The ground is a near-black jade, and two soft halos light it, drawn in WebGL2 as wide gaussian skirts with warmer cores so they read as lamps rather than coloured discs, screen-blended so light adds without clipping, and grained where the light is (the bare ground stays nearly clean). The lead halo breathes on a slow cycle, ten seconds by default, and leans toward the pointer with a 900ms settle, so it follows like a light someone is carrying; the second drifts on its own 45-second loop. The serif headline catches the light: a copy of it, clipped to the letters, is lit by a radial gradient that follows the lead halo's live position, so letters warm where the light sits behind them. Line breaks stack the title and *asterisks* set a word in italic. Two calls to action (the kit's SoftGlowButton, lit glass and quiet) and a row of short facts sit in the dark. Without WebGL2 the halos fall back to CSS gradients.
Curator’s note
The Diffused Glow kit's signature entry (slot 1, hero), cut from diffused-glow-site. Pro: a WebGL2 halo field (gaussian light with a warm core, grain weighted by the light, drift loops, a breathing lead that leans toward the pointer) that also drives a CSS-clipped lit copy of the headline, composing the kit's SoftGlowButton.
