Auto-Revealing Heading

1"use client";
2 
3import { motion, useInView, type Variants } from "framer-motion";
4import { useRef } from "react";
5 
6type AutoRevealingHeadingProps = {
7  text: string;
8  splitBy?: "letter" | "word";
9  delay?: number;
10  className?: string;
11};
12 
13export function AutoRevealingHeading({
14  text = "Auto Revealing Heading",
15  splitBy = "word",
16  delay = 0.1,
17  className = "",
18}: AutoRevealingHeadingProps) {
19  const ref = useRef(null);
20  const isInView = useInView(ref, { once: true, margin: "-100px" });
21 
22  const words = splitBy === "word" ? text.split(" ") : text.split("");
23 
24  const containerVariants: Variants = {
25    hidden: { opacity: 0 },
26    visible: {
27      opacity: 1,
28      transition: {
29        staggerChildren: delay,
30      },
31    },
32  };
33 
34  const itemVariants: Variants = {
35    hidden: { opacity: 0, y: 20 },
36    visible: {
37      opacity: 1,
38      y: 0,
39      transition: {
40        type: "spring",
41        stiffness: 300,
42        damping: 25,
43      },
44    },
45  };
46 
47  return (
48    <motion.div
49      ref={ref}
50      variants={containerVariants}
51      initial="hidden"
52      animate={isInView ? "visible" : "hidden"}
53      className={className}
54    >
55      {words.map((word, index) => (
56        <motion.span
57          key={index}
58          variants={itemVariants}
59          className="inline-block"
60          style={{ marginRight: splitBy === "word" ? "0.25em" : "0.1em" }}
61        >
62          {word}
63        </motion.span>
64      ))}
65    </motion.div>
66  );
67}