blur-in-text

1"use client"
2 
3import clsx from "clsx"
4import { motion } from "motion/react"
5 
6interface BlurInTextProps {
7  text?: string
8  className?: string
9}
10 
11export const BlurInText: React.FC<BlurInTextProps> = ({
12  text = "",
13  className = "",
14}) => {
15  const variants1 = {
16    hidden: { filter: "blur(10px)", opacity: 0 },
17    visible: { filter: "blur(0px)", opacity: 1 },
18  }
19 
20  return (
21    <motion.h1
22      initial="hidden"
23      animate="visible"
24      transition={{ duration: 1 }}
25      variants={variants1}
26      className={clsx(
27        "font-display text-center font-bold drop-shadow-sm",
28        "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
29        "tracking-[-0.02em]",
30        "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
31        className
32      )}
33    >
34      {text}
35    </motion.h1>
36  )
37}