Program Curve Pricing
Pricing beside the product's sunrise programs: pick gentle, standard or brisk and its curve morphs on a spring while the lamp, rendered live in a dark room, plays that sunrise in six seconds, next to the plans.
WebGL20 deps1 file · 33 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* ProgramCurvePricing — pricing beside the sunrise programs, with the lamp playing whichever you pick.
*
* Choose a program and its curve morphs on a spring while the lamp, rendered
* live in a dark room, plays that sunrise in six seconds, from an ember to
* the program's own daylight colour, then holds. The programs are a radio
* group with arrow keys; the plans sit beside them.
*
* Part of the Modern Minimal kit: a paper-white room (#f5f5f2, surfaces
* #ffffff, ink #141412) and one light, dawn #ffa64d, only ever as light.
* Two-layer shadows from one light above; scroll binds values directly,
* with no easing. Inter Tight through var(--font-inter-tight) for display
* over Geist. Respects prefers-reduced-motion. No dependencies beyond React.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing for a device whose value is how it behaves, so the behaviour is shown. The sunrise programs are a radio group: pick one and its curve morphs on a spring into the new shape, and the lamp, rendered live in a dark room, plays that sunrise in six seconds, from an ember to the program's own daylight colour, then holds. A chip names the program and its length; a line says who it suits. Beside it, the plans with their prices and what each includes, the first one raised on the kit's two-layer shadow, each with the kit's pill button.
Curator’s note
The Modern Minimal kit's pricing (slot 8), cut from modern-minimal-site. Pro: the kit's WebGL2 room playing a chosen program, a spring-morphed SVG curve and the plans.


