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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Kinetic Type Site
templatesThe whole Kinetic Type kit as one festival site: a flush nav, a pressure poster hero, a glyph wave field, a scrolled manifesto, the programme, a flush line-up, rebuilding passes, a name badge and a rising footer.
Flush Lineup Poster
sectionsA line-up set as a type poster: every name flush across the measure at one cap height, pointing clenches a name into the accent, choosing opens it, and day filters collapse the rest to hairlines.
Flush Wordmark Footer
sectionsA footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.