Diffused Glow Site
A 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.
WebGL20 deps1 file · 113 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* DiffusedGlowSite — a modern skin clinic and day spa, set in the Diffused
* Glow register: a warm bone day for the body of the page, bookended by a
* near-black jade treatment room where soft, grainy halos of light breathe
* and lean toward the pointer. One calm reaction per view; the serif carries
* the voice.
*
* - A floating nav whose Treatments menu opens a panel by skin concern; a
* halo glides behind the concern you point at and its treatments show.
* - A hero in the jade room: two grainy halos (WebGL) breathe on a 10s cycle,
* the nearer one settles toward the pointer, and the headline is lit
* where the light sits behind it.
* - Headings that resolve from a soft blur into focus as they arrive.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
A whole site for a modern skin clinic and day spa, designed as one piece and then cut into the Diffused Glow kit. It is set on two grounds: a warm bone day for the body of the page, bookended by a near-black jade treatment room. A floating nav of day glass opens its Treatments menu by skin concern. The first screen is the jade room lit by two soft, grained halos in WebGL; the lead one breathes and leans toward the pointer, and the serif headline warms where the light sits behind it. A treatment finder on a field of drifting colour asks three questions and brings the treatments that fit into the light. Six treatment cards hold their own light wells. Memberships are three lit rooms; the billing switch resolves every price. An arrival ritual offers a breathing guide. A booking picker blooms the chosen time into light and sends the request to your handler. The footer sets like the sun as it scrolls in. Every name, price, time and claim lives in one typed content object, DG_DEMO, marked as placeholder. It scrolls the page by default, or itself inside a fixed-height frame. Before launch, wire onRequest to your booking system (and isTaken to your availability), replace the demo links and content, and have clinical wording reviewed.
Curator’s note
The Diffused Glow kit, drop 6: the site the kit's assets are cut from. Pro: a full page composing every device of the kit (the WebGL halo engine in both its modes, the concern tabs, the finder, the light wells, the lit rooms, the breath pacer, the booking bloom, the dusk) around one typed, placeholder-marked content object.
