Axis Pass Pricing
Passes as tickets named in their own registers, quiet to loud: choose a pass, the count or the student rate and every figure that changes rebuilds digit by digit through the accent.
DOM + CSS0 deps1 file · 43 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* AxisPassPricing — passes as tickets, each named in its own register.
*
* The day pass is quiet and condensed, the festival pass set, the studio pass
* loud and wide; the names stand flush at one cap height. Choose a pass, the
* number of passes or the student rate and every figure that changes rebuilds
* digit by digit (collapse, swap, spring back through the accent), the total
* last. A radio group with arrow keys, a stepper and a switch; the total is
* announced politely.
*
* Part of the Kinetic Type kit: paper #f0ede2 and ink #131315 (an inverted
* ink stage for loud sections), one accent that letters take only under
* load (cobalt #2b3bff by default), and Science Gothic through
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Ticket pricing for an event, set so the passes differ in voice before they differ in price. The day pass is named quiet and condensed, the festival pass is set, the studio pass is loud, wide and high contrast, and the three names stand flush at one cap height on tickets with a perforated rule. Choose a pass, change the number of passes or turn on the student rate and every figure that changes rebuilds: the digits that differ collapse to hairlines one after another, swap, and spring back through the accent while the ones that stay the same stay put, and the total rebuilds last. The passes are a radio group that arrow keys move through, the count is a stepper, the student rate a switch, and the total is announced politely.
Curator’s note
The Kinetic Type kit's pricing (slot 8), cut from kinetic-type-site. Pro: a stateful system of a radio group, a stepper, a switch and rebuilding figures (their own engine instances), with the pass names flush at one size in three registers.


