Slot text

Text and numbers that spin into their new value on staggered slot machine reels.

$npx shadcn@latest add @silicon-ui/slot-text

specialtextnumbersnew

Installation

$npx shadcn@latest add @silicon-ui/slot-text

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/slot-text/slot-text.tsx
- components/silicon-ui/slot-text/slot-text.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`value*` The value to show. Numbers pass through format; strings render as they are.	`string \| number`	—
`format` Formats a number value. Defaults to en-US grouping, so 12480 reads 12,480.	`(value: number) => string`	—
`duration` Seconds the first reel spins. Later reels add stagger.	`number`	`.9`
`stagger` Seconds between reels stopping, left to right.	`number`	`.07`
`spins` Extra full turns a digit makes before it lands. 0 rolls straight to the new digit.	`number`	`1`
`align` Which end reels are matched from when the length changes. Numbers default to end, so 999 to 1,000 grows on the left.	`"start" \| "end"`	—
`announce` Announce new values politely to screen readers.	`boolean`	`false`
`className`	`string`	—
`style`	`CSSProperties`	—