Payload Plans
Pricing priced by one slider: drag the payload's mass and three offers re-price with rolling digits, the cheapest for that mass lifts and is marked, and a press-and-hold books it.
Canvas 2D0 deps1 file · 26 KB TSXreduced-motion aware
Props
"use client";
import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties } from "react";
/** Safety orange as a field colour. Black on it reads at 6.3:1. */
const HV_ORANGE = "#FF5B14";
/** The hot highlight, for orange marks on black. */
const HV_HOT = "#FF7A1A";
const HV_BLACK = "#0B0A09";
const HV_BONE = "#EFEBE4";
/**
* The display face: Archivo's width axis does the shouting (wdth 62..125).
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing tables make the reader do the maths. This one does it for them. A single slider sets the payload's mass from 1 to 500 kg, and three rides answer at once: Rideshare and Express priced by the kilo, Dedicated at a flat rate. Every price rolls to its new figure digit by digit, the offer that costs least for that mass lifts out of the row and is marked best value, and an offer that cannot carry the mass greys out and says so. Booking is deliberate: each card's button has to be pressed and held, fills with a flame edge and throws sparks when it lands. Black cards on a safety-orange field; stacked on a phone.
Curator’s note
Pro: one custom slider (pointer and keyboard: arrows, Shift, Page Up and Down, Home, End) drives three offers; per-kg and flat prices re-price with digit strips moved by CSS, the cheapest offer that fits the mass lifts and takes the badge, offers that cannot take the mass grey out, and each card books with the Hold to Ignite button. Every Hi-Vis entry is cut byte for byte from one site (Ardent, a made-up engine maker) and shares its fixed palette: safety orange #FF5B14 as a field, warm black, bone, Archivo's width axis for the shouting.
