UI components / Text
Scroll Reveal Text: a React and Tailwind UI component
A paragraph whose words light up one by one as you scroll through it.
Open the live Scroll Reveal Text 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 Scroll Reveal Text
- Create
components/ui/scroll-reveal-text.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 Scroll Reveal Text 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.
- Word Rotator: Words roll up through a slot that resizes to fit, each one blurring in.
- 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.