Lit Rooms Membership
Memberships 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.
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.
Memberships
A standing appointment
with your skin.
Essential
One facial a month and a quarterly skin review.
£95/ month
- A monthly facial of your choice
- Skin review every three months
- 10% off products
Radiance
A facial and a targeted treatment every month.
£165/ month
- Everything in Essential
- A peel or LED session monthly
- Priority evening slots
- 15% off products
Renewal
A doctor-led plan built around your skin goals.
£290/ month
- Everything in Radiance
- Microneedling or RF every other month
- A doctor's plan, reviewed quarterly
- 20% off products
Monthly prices shown.
Three months minimum; pause any time for travel or pregnancy.
Props
"use client";
import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* LitRoomsMembership — memberships as three rooms, each with its own lamp.
*
* One room is lit at rest; point at another (or tab into it) and its lamp
* rises while the others dim, with a 600ms settle, and only the lit room
* carries the filled button (the kit's SoftGlowButton). The billing switch
* is a radio group with arrow keys, and every price resolves out of a blur
* into its new figure. The heading is the kit's VeilResolveHeading.
*
* 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
* most two per view; a serif through var(--font-serif) over Geist. Respects
* prefers-reduced-motion. No dependencies beyond React. Paste it as its own
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
Pricing for memberships, set as three rooms along a corridor. Each tier is a card with its own lamp, a grained glow hanging from its top edge in the tier's colour. One room is lit at rest (the featured tier); point at another, or tab into it, and its lamp rises while the other rooms dim, as if someone walked the hall switching lamps, in 420ms. Only the lit room carries the filled button, so the page keeps one filled action in view, and the others offer a quiet one. The billing switch (monthly or yearly, with a note like Two months free) is a small radio group with arrow keys, and switching it resolves every price out of a blur into its new figure. Perks sit under each price with small lit dots in the room's colour. The heading is the kit's VeilResolveHeading.
Curator’s note
The Diffused Glow kit's proof and pricing section (slot 8), cut from diffused-glow-site. Pro: a composed pricing system (lit-room state across the grid, a keyboard radio switch, per-price blur resolves) composing the kit's VeilResolveHeading and SoftGlowButton.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Concern Finder Section
sectionsA 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.
Halo Treatment Card
componentsA treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while the card lifts on a feathered shadow.
Dusk Set Footer
sectionsA footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.