Halo Mesh Field
A 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.
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
Light that stays where you rest.
Props
"use client";
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* HaloMeshField — a quiet field of grained light for the body of a page.
*
* On the day ground, two pools of colour (jade and blush by default) drift
* across warm bone on their own slow loops, deepening the paper like light
* through tinted glass, and a warm lamp gathers under the pointer and fades
* when it leaves. In the jade room the same field becomes two halos of
* light. WebGL2, one pass, grain in the light; CSS radial gradients
* without it. The light feathers into the ground at the top and bottom
* edges, so fields stack between sections without a seam. Content goes on
* top as children.
*
* Part of the Diffused Glow kit: a warm bone day (#f6f1e6) and a jade room
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
The light the body of the page sits in. On the day ground, two soft pools of colour, jade and blush by default, drift across warm bone on their own slow loops (36 and 45 seconds), and the paper takes their colour where they pass, the way a room does when light comes through tinted glass; the grain sits in the pools, not on the page. Rest the pointer and a warm lamp gathers beneath it over a second or so, warming the paper, then fades when the pointer leaves. Set the ground to the jade room and the same field becomes two halos of added light. It is one WebGL2 pass and pauses off screen; without WebGL2 it falls back to CSS radial gradients. Content goes on top as children.
Curator’s note
The Diffused Glow kit's signature surface (slot 2), cut from diffused-glow-site, where it lies under the concern finder. Pro: the kit's WebGL2 halo engine in its day mode (colour pools that tint the paper) with a pointer lamp that fades in and out.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Breathing Halo Hero
heroesA 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.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Aurora Curtain Field
backgroundsThe kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.