Rotating Text
Cycles words in a headline like swapping a neon sign insert: the old tube powers off, the next one strikes.
New in 1.7.
Wire up billing, search, auth, webhooks
in an afternoon.
Drop-in modules for Next.js 16. Each one ships with its migration, 40-odd tests and a kill switch.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/rotating-text.jsonUsage
import { RotatingText } from "@/components/ui/rotating-text"
<h1>
Wire up <RotatingText words={["billing", "search", "auth"]} /> in an afternoon.
</h1>Examples
Controlled
index and onIndexChange keep the price in step; picking a plan pins it.
Sign insert
In a sentence
flicker={false} fades the new word up instead of striking it.
API reference
An inline span. It takes its font from the text around it. Also accepts span attributes.
| Prop | Type | Default |
|---|---|---|
words | string[]The inserts it cycles through. | None |
interval | numberMilliseconds each word stays lit. | 2600 |
index | numberThe lit word, controlled. | None |
defaultIndex | numberThe first lit word, uncontrolled. | 0 |
onIndexChange | (index: number) => voidFires when the timer moves on. | None |
paused | booleanHold the current word. | false |
flicker | booleanStrike the new word like a tube. Off, it fades up. | true |
live | booleanAnnounce each new word in a polite live region. | false |
color | NeonColorColor of the lit word. | inherited |
Accessibility
- By default screen readers get every word once, in place, so the sentence reads 'Wire up billing, search, auth in an afternoon' and nothing interrupts later. live announces each new word through aria-live='polite' instead; use it when the word is news, not decoration.
- It holds while the pointer is over the line, while focus is inside it, while the tab is hidden and while it's off screen, so nobody is reading a word as it leaves.
- Each word's width is measured once (and again if the font loads late); the box eases between widths so the rest of the line glides instead of jumping.
- With reduced motion words cross-fade with no flicker, slide or width animation.