shutter-text

1"use client";
2 
3import { AnimatePresence, motion, useInView } from "framer-motion";
4import {
5  type HTMLAttributes,
6  useCallback,
7  useEffect,
8  useRef,
9  useState,
10} from "react";
11 
12interface ShutterTextProps extends HTMLAttributes<HTMLDivElement> {
13  text?: string;
14  trigger?: "auto" | "scroll" | "click" | "hover";
15}
16 
17export default function ShutterText({
18  text = "IMMERSE",
19  trigger = "auto",
20  className = "",
21  ...props
22}: ShutterTextProps) {
23  const [count, setCount] = useState(0);
24  const [active, setActive] = useState(
25    trigger === "auto" || trigger === "click" || trigger === "hover",
26  );
27  const [animating, setAnimating] = useState(trigger === "auto");
28  const ref = useRef<HTMLDivElement>(null);
29  const isInView = useInView(ref, { once: false, amount: 0.5 });
30  const characters = text.split("");
31 
32  // Handle scroll trigger
33  useEffect(() => {
34    if (trigger === "scroll" && isInView) {
35      setActive(true);
36      setAnimating(true);
37      setCount((c) => c + 1);
38    }
39    if (trigger === "scroll" && !isInView) {
40      setActive(false);
41      setAnimating(false);
42    }
43  }, [trigger, isInView]);
44 
45  // Handle auto trigger – animate once on mount
46  useEffect(() => {
47    if (trigger === "auto") {
48      setActive(true);
49      setAnimating(true);
50      setCount((c) => c + 1);
51    }
52  }, [trigger]);
53 
54  const handleClick = useCallback(() => {
55    if (trigger === "click") {
56      setAnimating(true);
57      setCount((c) => c + 1);
58    }
59  }, [trigger]);
60 
61  const handleMouseEnter = useCallback(() => {
62    if (trigger === "hover") {
63      setAnimating(true);
64      setCount((c) => c + 1);
65    }
66  }, [trigger]);
67 
68  const handleMouseLeave = useCallback(() => {
69    if (trigger === "hover") {
70      setAnimating(false);
71    }
72  }, [trigger]);
73 
74  return (
75    <div
76      ref={ref}
77      role="button"
78      tabIndex={0}
79      onClick={handleClick}
80      onMouseEnter={handleMouseEnter}
81      onMouseLeave={handleMouseLeave}
82      className={`relative inline-flex flex-wrap items-center justify-center ${className}`}
83      {...props}
84    >
85      <AnimatePresence mode="wait">
86        {animating ? (
87          <motion.span
88            key={count}
89            className="flex flex-wrap items-center justify-center"
90          >
91            {characters.map((char, i) => (
92              <span
93                key={i}
94                className="relative inline-block overflow-hidden px-[0.1vw]"
95              >
96                {/* Main Character */}
97                <motion.span
98// … truncated