useEffect(() => {
  // Register ScrollTrigger plugin
  gsap.registerPlugin(ScrollTrigger);

  // Create animation for shrinking the topic box
  gsap.to(topPartRef.current, {
    height: "80px", // Shrunk height of the topic box
    fontSize: "1.25rem", // Adjust font size during shrink
    padding: "10px", // Add padding to maintain proportions
    scrollTrigger: {
      trigger: contentRef.current, // Trigger when scrolling through content
      start: "top top", // Start shrinking when content reaches the top
      end: "+=200", // End after 200px of scrolling
      scrub: true, // Smooth synchronization with scroll
      markers: false, // Enable for debugging (optional)
    },
  });

  // Optional: Fade-in effect for the content below
  gsap.fromTo(
    contentRef.current,
    { opacity: 0 },
    {
      opacity: 1,
      scrollTrigger: {
        trigger: contentRef.current,
        start: "top center", // Fade-in starts when content is centered
        scrub: true,
      },
    }
  );
}, []);