Slot Text

slot-text is a dependency-free text roll animation for tiny, tactile UI labels. It uses pure CSS transforms and ships bindings for vanilla JS, React, Vue, Solid, and Svelte. Source: textmotion.dev, https://textmotion.dev/, accessed 2026-06-25

Routing Summary

Use Slot Text when UI copy changes in place: counters, prices, status labels, loading text, and compact button labels. Route through animated-component-libraries or Interface Micro-Polish, then verify tabular number behavior, layout stability, and reduced-motion fallback.

Source Snapshot

The reviewed site labeled the package v0.3.1, but the 2026-07-01 registry refresh reports slot-text@0.3.2 as latest with peer bindings for React, Vue, Solid, and Svelte. GitHub source authority: Danilaa1/slot-text, tag v0.3.2 at dd1ccbf6d4f9c6beaedcba026c13399df85b86f4, and default branch HEAD 728f1e867dea844a7b948b536891472d5e7c3487. Source: npm registry packument; git ls-remote, 2026-07-01

The reviewed 2026-06-13 video shows Slot Text applied across rolling words, flight schedule rows, metric counters, and music-card labels before ending on the multicolor slot-text wordmark. That broadens the useful lane beyond buttons: compact dashboards can use it when the values are small, expected, and layout-stable. Source: X/@DanielWhit21874, local artifact wiki/assets/x-bookmarks/2065881547996057616/image-01.jpg, reviewed 2026-07-01

The 2026-06-24 artifact is a pale video thumbnail where a tiny center label rolls between phrases like "Make every label." That confirms the same guardrail from the opposite direction: small, low-amplitude text changes, not large decorative hero typography. Source: local artifact wiki/assets/x-bookmarks/2069820145258615006/image-01.jpg, reviewed 2026-06-30

Use When

Use slot-text for microcopy that changes in-place: Copy -> Copied, Saving -> Saved, status labels, counters, tiny button labels, or compact dashboard values. This is a microinteraction tool, not a hero animation. Source: X/@DanielWhit21874, 2026-06-24; textmotion.dev

Guardrails

• Use it where text length changes are small.
• Respect reduced motion.
• Keep duration under normal UI-animation limits from design-engineering-polish.
• Do not use rolling text for dense tables or frequently changing operational values.

---

Timeline

• 2026-07-01 | Refreshed version authority to slot-text@0.3.2; Git tag v0.3.2 resolves to dd1ccbf6d4f9c6beaedcba026c13399df85b86f4, with default branch HEAD 728f1e867dea844a7b948b536891472d5e7c3487. Source: npm registry packument; git ls-remote, 2026-07-01
• 2026-07-01 | Reviewed the earlier 2026-06-13 video artifact and promoted it from the design hub into this canonical tool page. Source: raw/x-bookmarks/enriched/2065881547996057616.json; local video contact sheet, 2026-07-01
• 2026-06-13 | Prior Slot-text bookmark was captured in X Bookmarks: Design & UI (Feb–Jun 2026). Source: X/@DanielWhit21874, 2026-06-13
• 2026-06-24 | New bookmark highlighted installing slot-text to make button components feel better. Source: X/@DanielWhit21874, https://x.com/DanielWhit21874/status/2069820145258615006
• 2026-06-25 | Dedicated tool page created because repeated bookmarks and a working package cleared the promotion gate. Source: raw/x-bookmarks/enriched/2069820145258615006.json
• 2026-06-30 | Deep-reviewed the local visual artifact and refreshed version authority to slot-text@0.3.1 / GitHub HEAD d5f57e7e2e06c0d4acc398aafbbaf7d62d853b1f; kept the decision as tool/docs update only, with no new executable skill because Frontend and Design Skills already owns adoption. Source: npm registry; GitHub Danilaa1/slot-text; X bookmark artifact audit, 2026-06-30