Letter Swap
betaA label whose letters roll over one after another on hover or focus — its own, or the link or button it sits in.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add letter-swapnpm packages installed: class-variance-authority.
import { LetterSwap } from "@/components/ui/letter-swap";Default
In AButton
<LetterSwap>
| Prop | Type | Default |
|---|---|---|
children (required)The label. Plain text: it is split into letters. | string | — |
asThe element to render. Default "span". | LetterSwapElement | "span" |
direction | "up" | "down" | "up" |
durationLength of each letter's roll, in milliseconds. Default 320. | number | 320 |
staggerDelay between one letter and the next, in milliseconds. Default 22. | number | 22 |
Plus every attribute of <span> except children.
The label is read as one word: the real text is a visually hidden copy and the rolling letters are aria-hidden, so a screen reader never spells it out. It rolls for keyboard focus exactly as for hover, on itself or on the link or button around it. Under reduced motion the swap is instant, and since the letters are the same, nothing visibly moves.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes