slot-text

Text roll animation for tiny, tactile UI labels. Now rolls by character or whole word.

Admired by

Claude Code Pran Nuxt Sébastien Chopin Mastra AI Sam Bhagwat General Translation Archie Rox Beni Superagent homanp GitHub Andrea Workers Chaitanya

Button

Status

Number 12,480req/s

Word mode

Installation

Usage

1
2
3
4
5
6
7
8
9import { slotText }
from "slot-text";
import "slot-text/style.css";

const label = slotText(el, "Save");
label.set("Changes saved", {
  rollBy: "word",
});1
2
3
4
5
6
7
8import { SlotText }
from "slot-text/react";
import "slot-text/style.css";

<SlotText
  text="Changes saved"
  options={{ rollBy: "word" }}
/>1
2
3
4
5
6
7
8import { SlotText }
from "slot-text/vue";
import "slot-text/style.css";

<SlotText
  text="Changes saved"
  :options="{ rollBy: 'word' }"
/>1
2
3
4
5
6
7
8
9
10import { slotText }
from "slot-text/solid";
import "slot-text/style.css";

<span
  use:slotText={{
    text: "Changes saved",
    options: { rollBy: "word" },
  }}
/>1
2
3
4
5
6
7
8
9
10import { slotText }
from "slot-text/svelte";
import "slot-text/style.css";

<span
  use:slotText={{
    text: "Changes saved",
    options: { rollBy: "word" },
  }}
></span>

Roadmap

Character or whole-word roll with spring easing
Per-segment stagger and duration controls
set and flash with spam-safe interrupt handling
Per-segment color, chromatic() rainbow helper
React, Vue, Solid, and Svelte adapters
Zero dependencies, ~1 kB of CSS

Real browser tests — suite runs in actual Chromium, every roll and cleanup tested where it happens
Reduced motion — respects prefers-reduced-motion, text swaps instantly
Screen reader support — animation stays visual-only, assistive tech reads the final text once
Full emoji and grapheme support — rolls as one character, not four

Stable API — locked surface, strict semver, changelog. Safe to build on
Zero-setup styles — no separate CSS import, it just works (CSS file stays for strict-CSP)
Awaitable rolls — await label.set("Done") and get notified when the last character lands

Number mode — odometer-style digit rolling, each digit takes the shortest path
Scramble style — characters spin through random glyphs before landing
Stagger origin — roll from start, end, center, or random order
Timing presets — snappy, smooth, playful — three tuned defaults
<slot-text> web component — one tag for Angular, Astro, or plain HTML
Docs site with live playground — tweak options, copy the code