Slot text

Free

Text whose characters roll like a slot machine when the value changes.

Installs components/ui/slot-text.tsxDepends on none beyond ReactMotion honours reduced motion

pnpm dlx shadcn@latest add https://caliperui.site/r/slot-text.json

When to use #

Use it for

A short value such as a status or label changes and the change should be noticed.

Skip it when

The value changes many times a second.
The text is long.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/slot-text.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { SlotText } from "@/components/ui/slot-text"

const audiences = ["designers", "engineers", "writers", "founders", "teams"];

export function SlotTextDemo() {
  const [audience] = useState(0);
  return (
    <SlotText items={audiences} index={audience} className="text-[color-mix(in_srgb,var(--chart-1)_70%,var(--foreground))]" />
  );
}

API reference #

SlotText

component

PropTypeDefaultDescription

items *readonly string[]—

index *number—

loopsnumber0Extra full turns before landing, for a livelier spin.

classNamestring—

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.