Fit Light Pricing
Pricing driven by a usage slider on a log scale: every price rolls to its new digits as you drag, and a light moves to the plan that costs least at that volume, its arc growing as usage nears the next plan.
DOM + CSS0 deps1 file · 18 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
/**
* FitLightPricing — pricing lit by a usage slider.
*
* A slider on a log scale sets the monthly volume. Every plan's price is
* computed from its base, included volume and per-million rate, and rolls
* to its new digits as you drag. A light moves to the plan that costs
* least at that volume: an arc on its border that grows as usage nears
* the next plan. Plans over their limit dim. The slider takes the arrow,
* Page, Home and End keys, and a polite status line names the plan that
* fits when you let go.
*
* Part of the Dark Precision kit: OLED black, 1px hairlines, one cool accent
* used only as light (default #4fd1ff; also mint, amber, white or any
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing for usage-based products, where the answer depends on the visitor's volume. A slider on a log scale runs from 100 thousand to a billion requests a month, snapped to two significant figures, with the volume shown large above it. Each plan is defined by a base price, an included volume and either a price per extra million or a hard limit, so every price is computed live and rolls to its new digits, column by column, as you drag. A light moves to the plan that costs least at that volume: the card's border lights, an arc of light sits on its top edge and grows as usage approaches the next plan, and its button turns white. Plans over their limit dim. The slider works with the pointer and with arrow, Page, Home and End keys, and a polite status line names the plan that fits when you let go. Every plan and price is data you pass in.
Curator’s note
The Dark Precision kit's pricing section (slot 8), cut from dark-precision-site. Pro: a stateful usage model (log-scale slider, per-plan price computation, cheapest-fit selection) with rolling digits, a measured fit arc and keyboard parity.
