slot-text

v0.3.2 lab

Text roll animation for tiny, tactile UI labels. Dependency-free, pure CSS transforms.

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

Installation

Usage

import { slotText }
from "slot-text";
import "slot-text/style.css";

const label = slotText(el, "Copy");
label.set("Copied");import { SlotText }
from "slot-text/react";
import "slot-text/style.css";

<SlotText
  text={copied ? "Copied" : "Copy"}
/>import { SlotText }
from "slot-text/vue";
import "slot-text/style.css";

<SlotText
  :text="copied ? 'Copied' : 'Copy'"
/>import { slotText }
from "slot-text/solid";
import "slot-text/style.css";

<span
  use:slotText={{
    text: copied() ? "Copied" : "Copy",
  }}
/>import { slotText }
from "slot-text/svelte";
import "slot-text/style.css";

<span
  use:slotText={{
    text: copied ? "Copied" : "Copy",
  }}
></span>

Roadmap

  • Character-by-character roll with spring easing
  • set and flash with spam-safe interrupt handling
  • Per-character 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