Halo Concern Nav
A floating nav in warm day glass whose Treatments menu opens by skin concern: a soft halo glides behind the concern you point at or arrow to, and its treatments resolve out of a blur beside 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.
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
/**
* HaloConcernNav — a floating nav whose Treatments menu is organised by concern.
*
* Warm day glass. The menu opens a panel out of a blur; the concerns are a
* vertical tab list (arrow keys, Home, End, or a hover with a short intent
* pause), a soft grained halo glides behind the active concern, and its
* treatments resolve beside it. Escape, a click outside or a pick closes
* it and returns focus to the button. The call to action is the kit's
* SoftGlowButton, solid by default or quiet. defaultOpen starts it open
* for a demo or a docs page.
*
* Part of the Diffused Glow kit: a warm bone day (#f6f1e6) and a jade room
* (#0b120f); soft, grained halos in gold, rose or jade (or any #rrggbb), at
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
A clinic's menu is its treatments, and people arrive with a concern, not a treatment name, so this nav's Treatments menu is organised by concern. The nav is a floating pill of warm day glass with the brand in italic serif, the menu button, a few plain links and the Book action. Open Treatments and a panel resolves out of a blur below it: on the left the concerns (breakouts, pigmentation, fine lines, redness, texture) with a line each, on the right the treatments for the active one. Point at a concern (after a 120ms intent pause, so sweeping across does not flicker) or move with the arrow keys, Home and End, and a soft grained halo glides behind it while its treatments resolve in with a short stagger. Escape, a click outside or picking a treatment closes it, returning focus to the button. The Book action is the kit's SoftGlowButton: solid by default, quiet when the page already has a filled booking action in view.
Curator’s note
The Diffused Glow kit's navigation (slot 5), cut from diffused-glow-site. Pro rather than the usual Free nav: a stateful disclosure with a vertical tab list (roving focus, arrow, Home and End keys, hover intent), outside-click and Escape handling with focus return, and a measured halo, composing the kit's SoftGlowButton.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Bento Command Nav
componentsSite navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.
Morphing Command Nav
componentsA floating nav pill that grows into a command palette in place: the same surface morphs from pill to panel, results are grouped with a light that slides between them, and it shrinks back on Escape or a pick.
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.