Concern Finder Section
A three-question treatment finder: pick a concern, sensitivity and downtime, and the treatments that fit rise into the light, each as bright as its fit, gliding to new ranks as answers change.
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.
Treatment finder
Start with your skin,
not a menu.
3 treatments fit. Best fit: Signature Facial.
Props
"use client";
import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* ConcernFinder — a three-question treatment finder.
*
* Pick a concern, say how your skin reacts and how much downtime you can
* take, and the treatments that fit rise into the light: each carries a
* grained halo as bright as its fit, the best is named, rows glide to their
* new places when an answer changes (FLIP) and new ones resolve out of a
* blur, and a light behind the results grows with the best match. Scores
* soften rather than drop a treatment on a strict answer, so the list is
* rarely empty. defaultConcern opens it on a concern (a deep link or a
* demo). Native radio groups; a polite live line says what fits.
* The heading is the kit's VeilResolveHeading.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
The part of a clinic site that replaces a price list with a conversation. Three short questions, each a row of pill-shaped native radio buttons: what would you most like to change, how does your skin react, how much downtime can you take. The treatments that fit rise into the light on the right: the best is named and alone holds a grained halo as bright as its score, the others carry a plain tint of their colour (one light per view), and every row says Strong fit, Good fit or Gentle option. Change an answer and the rows glide to their new places (FLIP, measured before and after) while newcomers resolve out of a blur. The scoring softens rather than removes a treatment that fails on sensitivity or downtime, so a strict answer rarely leaves the list empty, and the scores and wording are yours to set per treatment. A polite live line says what fits. The heading is the kit's VeilResolveHeading.
Curator’s note
The Diffused Glow kit's feature section (slot 7), cut from diffused-glow-site, where it sits on the halo mesh field. Pro: a scored recommendation system over three native radio groups, FLIP re-ranking with the Web Animations API, blur resolves and score-driven light, composing the kit's VeilResolveHeading.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Lit Rooms Membership
sectionsMemberships as three rooms along a corridor, each with its own grained lamp: point at one and its light rises while the others dim, and the billing switch resolves every price out of a blur.
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.
Halo Concern Nav
componentsA 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.