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.
DOM + CSS0 deps1 file · 22 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.


