letter-pull-up-text

1"use client"
2 
3import clsx from "clsx"
4import { motion } from "motion/react"
5 
6interface LetterPullUpTextProps {
7  text?: string
8  className?: string
9}
10 
11export const LetterPullUpText: React.FC<LetterPullUpTextProps> = ({
12  text = "",
13  className = "",
14}) => {
15  const letters = text.split("")
16 
17  const pullupVariant = {
18    initial: { y: 100, opacity: 0 },
19    animate: (i: number) => ({
20      y: 0,
21      opacity: 1,
22      transition: {
23        delay: i * 0.05, // Delay each letter's animation by 0.05 seconds
24        duration: 0.5, // Adjust duration for smoothness
25      },
26    }),
27  }
28 
29  return (
30    <div className={clsx("flex justify-center", className)}>
31      {letters.map((letter, i) => (
32        <motion.h1
33          key={i}
34          variants={pullupVariant}
35          initial="initial"
36          animate="animate"
37          custom={i}
38          className={clsx(
39            "font-display text-center font-bold drop-shadow-sm",
40            "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
41            "tracking-[-0.02em]",
42            "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
43          )}
44        >
45          {letter === " " ? <span>&nbsp;</span> : letter}
46        </motion.h1>
47      ))}
48    </div>
49  )
50}