I AM
ITERATING

1export const Hero = () => {
2  const titleRef = useRef(null);
3  const [isProjectTitle, setIsProjectTitle] = useState(false);
4  const text = "ITERATING";
5  const projectText1 = "THE ITERATOR";
6  const projectText2 = "PROJECT";
7
8  const handleToggle = () => {
9    gsap.to(titleRef.current, {
10      opacity: 0,
11      y: -20,
12      duration: 0.3,
13      onComplete: () => setIsProjectTitle(!isProjectTitle)
14    });
15  };
16
17  useEffect(() => {
18    if (!titleRef.current) return;
19
20    const ctx = gsap.context(() => {
21      if (isProjectTitle) {
22        // Animate in "THE ITERATOR PROJECT"
23        const tl = gsap.timeline();
24        
25        tl.set(titleRef.current, { opacity: 1, y: 0 });
26        
27        tl.to(".project-char", {
28          opacity: 1,
29          duration: 0.1,
30          stagger: 0.05,
31          ease: "none"
32        });
33
34        tl.to(".project-highlighter", {
35          scaleX: 1,
36          duration: 0.6,
37          ease: "power2.out"
38        }, "-=0.5");
39      } else {
40        // Animate in "I AM ITERATING"
41        const tl = gsap.timeline();
42        
43        tl.set(titleRef.current, { opacity: 1, y: 0 });
44        
45        tl.to(".char", {
46          opacity: 1,
47          duration: 0.1,
48          stagger: 0.1,
49          ease: "none"
50        });
51        
52        tl.to(".highlighter", {
53          scaleX: 1,
54          duration: 0.6,
55          ease: "power2.out"
56        });
57      }
58    }, titleRef); // Scope to titleRef or container
59
60    return () => ctx.revert();
61  }, [isProjectTitle]);
62
63  return (
64    <section className="...">
65      <h1 ref={titleRef} onClick={handleToggle} className="...">
66        {isProjectTitle ? (
67          <span>
68            <span className="inline-block">
69              {projectText1.split("").map((char, i) => (
70                <span key={i} className="project-char opacity-0">{char}</span>
71              ))}
72            </span>
73            <br />
74            <span className="relative inline-block px-4">
75              {projectText2.split("").map((char, i) => (
76                <span key={i} className="project-char opacity-0">{char}</span>
77              ))}
78              <div className="project-highlighter ..."></div>
79            </span>
80          </span>
81        ) : (
82          // ... "I AM ITERATING" code
83        )}
84      </h1>
85    </section>
86  );
87};