gradual-spacing-text

1"use client"
2 
3import clsx from "clsx"
4import { AnimatePresence, motion } from "motion/react"
5 
6interface GradualSpacingTextProps {
7  text?: string
8  className?: string
9}
10 
11export const GradualSpacingText: React.FC<GradualSpacingTextProps> = ({
12  text = "",
13  className = "",
14}) => {
15  const gradual = {
16    hidden: { opacity: 0, x: -20 },
17    visible: { opacity: 1, x: 0 },
18  }
19 
20  return (
21    <div className={clsx("flex justify-center space-x-1", 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={gradual}
30            transition={{ duration: 0.5, delay: i * 0.1 }}
31            className={clsx(
32              "font-display text-center font-bold drop-shadow-sm",
33              "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
34              "tracking-[-0.02em]",
35              "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
36            )}
37          >
38            {char === " " ? <span>&nbsp;</span> : char}
39          </motion.h1>
40        ))}
41      </AnimatePresence>
42    </div>
43  )
44}