wavy-text

1"use client"
2 
3import clsx from "clsx"
4import { AnimatePresence, motion } from "motion/react"
5 
6interface WavyTextProps {
7  text?: string
8  className?: string
9}
10 
11export const WavyText: React.FC<WavyTextProps> = ({
12  text = "",
13  className = "",
14}) => {
15  const variants1 = {
16    hidden: { y: 10 },
17    visible: { y: -10 },
18  }
19 
20  return (
21    <div className={clsx("flex justify-center space-x-2", className)}>
22      <AnimatePresence>
23        {text.split("").map((char, i) => (
24          <motion.h1
25            key={i}
26            initial="hidden"
27            animate="visible"
28            exit="hidden"
29            variants={variants1}
30            transition={{
31              repeat: Infinity,
32              repeatType: "reverse",
33              duration: 0.5,
34              delay: i * 0.2,
35            }}
36            className={clsx(
37              "font-display text-center font-bold drop-shadow-sm",
38              "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
39              "tracking-[-0.02em]",
40              "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
41            )}
42          >
43            {char}
44          </motion.h1>
45        ))}
46      </AnimatePresence>
47    </div>
48  )
49}