SlotText

Text and numbers that spin into their new value on staggered slot-machine reels: digits count in the direction the number moved, letters shuffle, and reels land left to right.

When to use

• Stats, prices and counters that change while people watch — dashboards, pricing toggles, launch moments where a change deserves a beat.
• Short words that switch between a few values (plan names, statuses).
• For calm in-place label changes, use TextMorph. For values that update constantly (every second), use plain text — repeated spins become noise.

Usage

import { SlotText } from "@/components/iris/slot-text/slot-text";

<SlotText value={visitorsThisWeek} className="stat" />
<SlotText value={monthlyRevenue} format={n => `€${n.toLocaleString("en-US", { minimumFractionDigits: 2 })}`} spins={0} />
<SlotText value={planName} align="start" announce />

Props

Prop	Type	Default	Description
value	string | number	—	Value to show (required). Numbers pass through format; strings render as they are.
format	(value: number) => string	en-US grouping	Formats a number value (12480 reads 12,480).
duration	number	0.9	Seconds the first reel spins; later reels add stagger.
stagger	number	0.07	Seconds between reels stopping, left to right.
spins	number	1	Extra full turns before a digit lands; 0 rolls straight to the new digit.
align	"start" | "end"	end for numbers	Which end reels match from when the length changes, so 999 to 1,000 grows on the left.
announce	boolean	false	Announce new values politely to screen readers.
className, style	—	—	Typography; the component uses tabular numerals and line-height: 1.15.

Notes

• The readable value is kept in a visually hidden copy; the reels are aria-hidden. Turn on announce only where the change matters to the reader.
• Each slot's width follows its character on a spring, so the word never resizes in one frame. Edges fade through a mask instead of clipping glyphs.
• The same change always spins the same letters (deterministic shuffle). Reduced motion swaps values without spinning.