StackBits - React UI & Full-Stack Code Library

Texts > Blur Text

🌫️ Blur Text

Make your text animation stand out with BlurText! ✨ Watch as each letter smoothly sharpens into focus as it comes into view, creating a stunning blur-to-clear effect. Perfect for dramatic reveals, mysterious aesthetics, interactive UI elements, and engaging landing pages, this React component uses Framer Motion to add a sleek and modern touch to your website. 👀🔮

Preview

Now you see me

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion

Component

Create a file blur-text.tsx in your components folder and paste this code

1import { motion } from 'framer-motion';
2import { FC } from 'react';
3
4type BlurTextProps = {
5  text: string;
6  className?: string;
7};
8
9const BlurText: FC<BlurTextProps> = ({ text, className }) => {
10  return (
11    <div className={`flex flex-wrap overflow-visible ${className}`}>
12      {text.split('').map((char, index) => (
13        <motion.span
14          key={index}
15          initial={{ y: 10, filter: 'blur(10px)' }}
16          whileInView={{ y: 0, filter: 'blur(0px)' }}
17          transition={{
18            duration: 0.2,
19            delay: index * 0.1,
20            ease: 'backOut'
21          }}
22          className="inline-block"
23        >
24          {char === ' ' ? ' ' : char}
25        </motion.span>
26      ))}
27    </div>
28  );
29};
30
31export default BlurText;

Usage

1<BlurText
2    text="Now you see me"
3    className="text-yellow-500 text-2xl sm:text-3xl md:text-4xl font-extrabold"
4></BlurText>

⭐️ Got a question or feedback?
Feel free to reach out!