Aurora Volume Pricing
Usage pricing where the sky answers the number: a log-scale slider rolls the price digit by digit while the aurora behind widens from a dim, cool display to the whole palette and the city lights up.
WebGL20 deps1 file · 41 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { ChangeEvent, CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* AuroraVolumePricing — usage pricing where the sky answers the number.
*
* A log-scale slider sets the monthly volume; the price rolls digit by digit
* (420ms), the plan and its perks follow, and the aurora behind the panel
* widens with the volume: dim, cool and narrow at the bottom of the range,
* the whole palette with its rose crown at the top, with more of the city's
* windows lit. Tiers are data (a base and a per-unit rate above the tier
* below). A native range input; plan and price are announced once settled.
*
* Part of the Aurora kit: a near-black night (#050608) lit by curtains of
* aurora in mint #7cf5c4 and sky #38bdf8, a violet #a78bfa blend, a rose
* #f472b6 crown and an indigo #5b6cc4 fringe, all on one 60s clock; Bricolage
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Usage-based pricing with a sky that responds to the number. A log-scale slider sets the monthly volume from a hundred to a hundred thousand; the price rolls to its new figure digit by digit in 420ms, the plan name and what it includes follow, and at the plan boundaries the jump is visible in the rolling digits. Behind the panel the aurora widens with the volume: at the bottom of the range it is a dim, cool, narrow display, and as you drag it brightens, spreads into violet, shows its rose crown and lights more of the city's windows, easing over about 420ms after the thumb stops. Tiers are data: a ceiling, a base price and a per-unit rate above the tier below. The slider is a native range input with keyboard steps, and the plan and price are announced once the value settles.
Curator’s note
The Aurora kit's pricing (slot 8), cut from aurora-site. Pro: the engine's intensity, crown, palette spread and lit windows driven by the slider, an odometer price and data-driven tiers.
