"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import styles from "./styles.module.css";

gsap.registerPlugin(ScrollTrigger);

function Media({ videoSrc, imageSrc, poster, className }) {
  if (videoSrc) {
    return (
      <video
        className={className}
        src={videoSrc}
        autoPlay
        muted
        loop
        playsInline
        poster={poster}
      />
    );
  }
  if (imageSrc) {
    return <img className={className} src={imageSrc} alt="" />;
  }
  return null;
}

export default function AboutIntro({
  heading = "Myself",
  text = "",
  videoSrc,
  imageSrc,
  poster,
}) {
  const sectionRef = useRef(null);
  const headingLineRef = useRef(null);
  const mobileTextLineRef = useRef(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      /* ---- Heading line reveal ---- */
      if (headingLineRef.current) {
        gsap.from(headingLineRef.current, {
          yPercent: 100,
          duration: 1,
          ease: "power4.out",
          scrollTrigger: {
            trigger: headingLineRef.current,
            start: "top 85%",
            once: true,
          },
        });
      }

      /* ---- Mobile text line reveal ---- */
      if (mobileTextLineRef.current) {
        gsap.from(mobileTextLineRef.current, {
          yPercent: 100,
          duration: 1,
          ease: "power4.out",
          scrollTrigger: {
            trigger: mobileTextLineRef.current,
            start: "top 85%",
            once: true,
          },
        });
      }
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  return (
    <section ref={sectionRef} className={styles.section}>
      {/* Left column — content */}
      <div className={styles.content}>
        {/* Heading */}
        <h4 className={styles.heading}>
          <span className={styles.lineMask}>
            <span ref={headingLineRef} className={styles.line}>
              {heading}
            </span>
          </span>
        </h4>

        {/* Mobile media */}
        <div className={styles.mediaMobile}>
          <div className={styles.mediaWrap}>
            <Media videoSrc={videoSrc} imageSrc={imageSrc} poster={poster} className={styles.mediaElement} />
          </div>
        </div>

        {/* Desktop paragraph */}
        <p className={styles.textDesktop}>{text}</p>

        {/* Mobile paragraph with line-mask */}
        <p className={styles.textMobile}>
          <span className={styles.lineMask}>
            <span ref={mobileTextLineRef} className={styles.line}>
              {text}
            </span>
          </span>
        </p>
      </div>

      {/* Right column — desktop media */}
      <div className={styles.mediaDesktop}>
        <div className={styles.stickyWrap}>
          <div className={styles.mediaWrap}>
            <Media videoSrc={videoSrc} imageSrc={imageSrc} className={styles.mediaElement} />
          </div>
        </div>
      </div>
    </section>
  );
}
About Intro

Preview

Myself

Source

Dependencies

Related Components
