Slot text
Text and numbers that spin into their new value on staggered slot machine reels.
pnpm dlx shadcn@latest add @uiarc/slot-textLive · keyboard ready
Revenue+12.4%
$31,904- Pricing toggles, KPI cards, dashboards changing period.
- Launch moments, raffles, and reveals.
- Values that update several times a second.
- Long sentences; reels are for short values.
Installation
Add Slot text with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/slot-textAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { SlotText } from "@/registry/components/slot-text/slot-text"; <SlotText value={revenue} format={value => `$${value.toLocaleString("en-US")}`} announce /> <SlotText value={live ? "Live now" : "Soon"} spins={2} />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.
PropTypeDefaultDescription
valueRequiredstring | number–The value to show. Numbers pass through format.format(value: number) => string–Formats number values. Defaults to en-US grouping (12,480).durationnumber0.9Seconds the first reel spins.staggernumber0.07Seconds between reels stopping, left to right.spinsnumber1Extra 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.announcebooleanfalseAnnounces new values politely to screen readers.classNamestring–Extra class on the root. Font size and color come from the parent.- 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.
- 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.
- It is inline text and scales with its font size; reels are measured in em.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.