Slot text

• Type: Component (special)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/slot-text
• Markdown: https://ui.xzero.co.uk/components/slot-text/markdown
• Registry item: https://mcp.xzero.co.uk/r/slot-text.json
• Source file: registry/components/slot-text/slot-text.tsx
• Dependencies: motion
• Keywords: special, text, numbers, new, slot machine text, rolling number, number ticker, odometer react, slot text animation, price animation, animated digits

When to use

• Pricing toggles, KPI cards, dashboards changing period.
• Launch moments, raffles, and reveals.

When not to use

• Values that update several times a second.
• Long sentences; reels are for short values.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/slot-text

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

<SlotText value={revenue} format={value => `$${value.toLocaleString("en-US")}`} announce />

<SlotText value={live ? "Live now" : "Soon"} spins={2} />

API reference

SlotText

Text or a number where every character is a reel. On change, digits count through the wheel in the direction the number moved, letters shuffle through the alphabet, and reels land left to right without overshoot.

Prop	Type	Default	Description
value (required)	string | number	–	The value to show. Numbers pass through format.
format	(value: number) => string	–	Formats number values. Defaults to en-US grouping (12,480).
duration	number	0.9	Seconds the first reel spins.
stagger	number	0.07	Seconds between reels stopping, left to right.
spins	number	1	Extra full turns before landing. 0 rolls straight to the new digit.
align	"start" | "end"	–	Which end reels are matched from when the length changes. Numbers default to end, strings to start.
announce	boolean	false	Announces new values politely to screen readers.
className	string	–	Extra class on the root. Font size and color come from the parent.

Accessibility

• The full value is real text in a visually hidden span; the reels are aria-hidden.
• announce adds a polite live region for values that change without user action.

Motion

• Each reel spins with a fast start and a long, soft landing that never passes the target.
• Reels stop one after another left to right; blur follows each reel's speed, so fast spins smear and landings are sharp.
• A reel's width follows its new character on a critically damped spring, and new characters grow in while removed ones collapse.
• Leading symbols such as a currency sign stay on their own reels, and separators stay aligned from the end, so 999 to 1,000 only spins digits.
• Changing the value mid-spin restarts from the cell on screen, keeping its offset, so nothing jumps.
• Reduced motion swaps values instantly.

Responsive behavior

• It is inline text and scales with its font size; reels are measured in em.

Performance

• Each reel is one transform on a motion value; React re-renders only when the value changes.
• Blur is removed when a reel is still.

Notes for AI

• Use it where a change deserves a beat: prices switching plans, stats changing period, a launch status flipping.
• Put it inside text you style; it inherits font, size, weight, and color. Digits use tabular numerals.
• For values that tick every second, use a counter with spins={0} or animated-counter; long spins on every tick get tiring.

Related

• Animated counter: Give changing totals a clear sense of movement.
• Countdown: A launch countdown with rolling digits that morphs into a live state at zero.
• Text morph: Morph a label into its next state, letter by letter.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.

Also in type

• Keycap keyboard: Mechanical keycaps that sink and light up as you type, with the text above the board.
• Sand text: A headline made of sand that pours into the letters, crumbles where the cursor digs, and heals itself.
• Typewriter terminal: A terminal that types a scripted CLI session with a seeded human cadence, colors the shell syntax, and streams output lines, progress bars and spinners, with a scrubber, play/pause and replay controls.

Guidance for AI tools

Slot text: Text and numbers that spin into their new value on staggered slot machine reels. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt