Skip to content

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.

ProDiffused Glowminimaleditorial

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.

Preview

Ondine · Skin clinic

Light that stays where you rest.

Props

Lamp under the pointer
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

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.

herowebglshader
NewPro

A 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.

backgroundwebglshader
NewPro

The 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.

backgroundwebglshader