Rolling text
A label whose changed characters roll, up as a value rises and down as it falls, while the unchanged ones slide into place and the width springs.
Features
- Unchanged characters keep their key and slide; changed ones roll out one edge and in the other.
- Direction from the value: up as it rises, down as it falls.
- A 0.03 s stagger per changed glyph, capped at six; the width springs.
Use it for
- Prices, counters, totals.
- Button labels that change.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react motion - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { RollingText } from 'runets'
<Button variant="submit"><RollingText text={`Pay $${price}`} value={price} /></Button>API
| Prop | Type | What it does |
|---|---|---|
text | string | The label. |
value | number | Optional value that picks the roll direction. |
Accessibility
- The whole text is the accessible label; the moving glyphs are hidden.
- Reduced motion crossfades.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.