word-pull-up-text

1"use client"
2 
3import clsx from "clsx"
4import { motion } from "motion/react"
5 
6interface WordPullUpTextProps {
7  text?: string
8  className?: string
9}
10 
11export const WordPullUpText: React.FC<WordPullUpTextProps> = ({
12  text = "",
13  className = "",
14}) => {
15  const container = {
16    hidden: { opacity: 0 },
17    show: {
18      opacity: 1,
19      transition: {
20        staggerChildren: 0.2,
21      },
22    },
23  }
24 
25  const item = {
26    hidden: { y: 20, opacity: 0 },
27    show: { y: 0, opacity: 1 },
28  }
29 
30  return (
31    <motion.h1
32      variants={container}
33      initial="hidden"
34      animate="show"
35      className={clsx(
36        "font-display text-center font-bold drop-shadow-sm",
37        "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
38        "tracking-[-0.02em]",
39        "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
40        className
41      )}
42    >
43      {text.split(" ").map((word, i) => (
44        <motion.span
45          key={i}
46          variants={item}
47          style={{ display: "inline-block", paddingRight: "15px" }}
48        >
49          {word === "" ? <span>&nbsp;</span> : word}
50        </motion.span>
51      ))}
52    </motion.h1>
53  )
54}