UI components / Text
Word Rotator: a React and Tailwind UI component
Words roll up through a slot that resizes to fit, each one blurring in.
Open the live Word Rotator preview.
About text components
Animated text should support the headline, not compete with it. Keep the real words in the DOM so search engines and screen readers read them, run the effect once or on hover, and respect reduced-motion settings for longer sequences.
Install the Word Rotator
- Create
components/ui/word-rotator.tsxin your React + Tailwind project. - Paste the code. It only imports React; keyframes are defined inside the file.
- Import the named component where you need it. The default export is a ready-made demo you can delete.
Frequently asked questions
Is the Word Rotator component free?
Anyone can open the live preview. Copying the code is included with a Scrollhaus plan.
What do I need to use it?
A React project with Tailwind CSS: Next.js, Vite, Lovable or Bolt. The file only imports React; its animations ship inside the component.
Is it accessible?
It uses native elements and ARIA attributes where needed, keeps keyboard focus visible and works without a mouse.
More text
- Typewriter Text: Types each phrase, pauses, deletes it and types the next, with a blinking caret.
- Number Ticker: Each digit rolls on its own reel to the new value when it scrolls into view.
- Aurora Text: A headline filled with a slowly drifting multi-colour gradient.
- Scramble Text: Letters cycle through random characters and lock in one by one, like a decoder.
- Highlight Marker: A hand-drawn marker stroke sweeps behind key words as they scroll into view.
- Blur-In Text: Each letter rises out of a blur in a gentle staggered wave.