UI components / Text
Blur-In Text: a React and Tailwind UI component
Each letter rises out of a blur in a gentle staggered wave.
Open the live Blur-In 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 Blur-In Text
- Create
components/ui/blur-in-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 Blur-In Text component free?
Yes. Anyone can open the live preview and copy the code.
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.