Blurred Stagger Text

1"use client";
2 
3import * as React from "react";
4 
5import { motion } from "motion/react";
6 
7export const BlurredStagger = ({
8  text = "built by ruixen.com",
9}: {
10  text: string;
11}) => {
12  const headingText = text;
13 
14  const container = {
15    hidden: { opacity: 0 },
16    show: {
17      opacity: 1,
18      transition: {
19        staggerChildren: 0.015,
20      },
21    },
22  };
23 
24  const letterAnimation = {
25    hidden: {
26      opacity: 0,
27      filter: "blur(10px)",
28    },
29    show: {
30      opacity: 1,
31      filter: "blur(0px)",
32    },
33  };
34 
35  return (
36    <>
37      <div className="w-full">
38        <motion.p
39          variants={container}
40          initial="hidden"
41          animate="show"
42          className="text-base leading-relaxed break-words whitespace-normal"
43        >
44          {headingText.split("").map((char, index) => (
45            <motion.span
46              key={index}
47              variants={letterAnimation}
48              transition={{ duration: 0.3 }}
49              className="inline-block"
50            >
51              {char === " " ? "\u00A0" : char}
52            </motion.span>
53          ))}
54        </motion.p>
55      </div>
56    </>
57  );
58};