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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Ondine · Skin clinic & day spa
Skin, in its own light.
Doctor-led treatments and slow facials in a room built for exhaling. Consultations are free, and unhurried.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Halo Mesh Field
backgroundsA quiet WebGL field for the body of a page: two grained pools of colour drift across warm bone like light through tinted glass, and a warm lamp gathers under the pointer where you rest.
Diffused Glow Site
templatesA complete site for a modern skin clinic and day spa: a concern-organised nav, a jade room lit by breathing WebGL halos, a treatment finder, treatment cards with light wells, lit-room memberships, a breathing ritual, a booking picker and a footer at dusk.
Soft Glow Button
componentsA pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring of light.