Slot text ported

Spin text and numbers into their new value like slot machine reels.

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

Live specimen

Loading demo…

Guidance

When to use

Prices, stats, and launch moments where a value change deserves a beat.
Numbers that grow on the left (999 to 1,000) or strings that shuffle letters.

When not to use

Use text-morph for short status words that share most of their letters.
Use animated-counter for a plain counting transition without reels.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
  import { SlotText } from '$lib/components/slot-text';
</script>

<SlotText value={12480} announce />

Variants & Examples

Number

Grouped by default, so 12480 reads 12,480.

<SlotText value={12480} announce />

String

Strings render as they are.

<SlotText value="Liftoff" />

API Reference

Prop	Type	Default	Description
`value`	`string \| number`	–	(Required) The value to show. Numbers pass through format; strings render as they are.
`format`	`(value: number) => string`	–	Formats a number value. Defaults to en-US grouping, so 12480 reads 12,480.
`duration`	`number`	0.9	Seconds the first reel spins. Phase-1 still-port: parity only, no behaviour yet.
`stagger`	`number`	0.07	Seconds between reels stopping, left to right. Phase-1 still-port: parity only.
`spins`	`number`	1	Extra full turns a digit makes before it lands. Phase-1 still-port: parity only.
`align`	`"start" \| "end"`	"end" for numbers, "start" for strings	Which end reels are matched from when the length changes. Phase-1 still-port: parity only.
`announce`	`boolean`	false	Announce new values politely to screen readers via aria-live="polite".
`class`	`string`	–	Merged onto the root element.
`style`	`string`	–	Inline styles forwarded to the root element.

Accessibility

New values are announced politely when announce is set; the reels themselves are aria-hidden.
Digits use tabular numerals so the line does not reflow as values change.

Motion

Phase-1 still-port: every reel renders its landed target cell statically with the live-region wiring intact — spinning, stagger, width springs and velocity blur are deferred to Phase 2, with a reduced-motion instant path.

Notes for AI

Numbers default to end alignment so growth happens on the left; pass align="start" to pin the left.
Motion props (duration, stagger, spins, align) are accepted now and take effect in Phase 2.

Source of truth: registry/components/slot-text/slot-text.tsx