Skip to content

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

ProModern Minimalminimaleditorial
Preview

Props

The source is part of Pro

$27/month or $179 once. See Pro

No runtime dependencies
"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.

Pairs well with

Pro
Pro
Pro