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


