fade-text

1"use client"
2 
3import React from "react"
4import clsx from "clsx"
5import { motion } from "motion/react"
6 
7type FadeDirection = "in" | "up" | "down"
8 
9interface FadeTextProps {
10  text?: string
11  className?: string
12  direction?: FadeDirection
13  staggerDelay?: number
14  wordDelay?: number
15}
16 
17export const FadeText: React.FC<FadeTextProps> = ({
18  text = "",
19  className = "",
20  direction = "in",
21  staggerDelay = 0.15,
22  wordDelay = 0.1,
23}) => {
24  // For "in" direction, we animate word by word
25  if (direction === "in") {
26    const words = text.split(" ")
27 
28    return (
29      <motion.div
30        initial="hidden"
31        animate="visible"
32        viewport={{ once: true }}
33        variants={{
34          hidden: {},
35          visible: {
36            transition: {
37              staggerChildren: wordDelay,
38            },
39          },
40        }}
41      >
42        <motion.h1
43          className={clsx(
44            "font-display text-center font-bold drop-shadow-sm",
45            "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
46            "tracking-[-0.02em]",
47            "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]",
48            className
49          )}
50        >
51          {words.map((word, i) => (
52            <motion.span
53              key={`${word}-${i}`}
54              variants={{
55                hidden: { opacity: 0 },
56                visible: { opacity: 1 },
57              }}
58            >
59              {word}{" "}
60            </motion.span>
61          ))}
62        </motion.h1>
63      </motion.div>
64    )
65  }
66 
67  // For "up" and "down" directions, we animate the entire text
68  const animationVariants =
69    direction === "up"
70      ? {
71          hidden: { opacity: 0, y: 20 },
72          show: {
73            opacity: 1,
74            y: 0,
75            transition: {
76              type: "spring" as const,
77              stiffness: 100,
78              damping: 12,
79              duration: 0.8,
80            },
81          },
82        }
83      : {
84          hidden: { opacity: 0, y: -20 },
85          show: {
86            opacity: 1,
87            y: 0,
88            transition: {
89              type: "spring" as const,
90              stiffness: 100,
91              damping: 12,
92              duration: 0.8,
93            },
94          },
95        }
96 
97  return (
98    <motion.div
99      initial="hidden"
100      animate="show"
101      viewport={{ once: true }}
102      transition={{ delay: staggerDelay }}
103    >
104      <motion.h1
105        className={clsx(
106          "font-display text-center font-bold drop-shadow-sm",
107// … truncated