Slot text

In FORMA

• Liegt in kit/arc/slot-text und ist über @/forma/arc/slot-text/slot-text erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

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.

Usage

import { SlotText } from "@/forma/arc/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.

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://uiarc.dev/llms.txt