RollingText
A word that rolls through a list of options.
Headline
Hover or focus pauses the motion.
Build with product context: analytics, replays, experiments
Without motion
animate={false}, a single word, or an empty list shows static text.
animate={false}
Give your agents product context: analytics, replays
One wordStart with session replay
No wordsExplore PostHog
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Use short words that fit the narrowest window. The longest word sets the width.
API
RollingText is a site component. It accepts span element props.
RollingText
| Prop | Type | Default | Description |
|---|---|---|---|
| words | readonly string[] | – | Sets the options in display order. |
| staticText | string | – | Adds a description before the accessible list. Supplies visible text when the list is empty. |
| interval | number | 2400 | Sets milliseconds per word, including its transition. |
| animate | boolean | true | Enables the CSS reel while the component is visible. |
| color | 'gray' | 'brand' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow' | – | A brand color for the words. Omit it to use the text color. |