Button Tilt

"use client";

import { useRef, useEffect, useCallback } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

interface ButtonTiltProps {
  /** Display text — rendered uppercase, split into individual characters */
  text: string;
  /** Link URL — renders <a> instead of <button> when provided */
  to?: string;
  /** Flash color for the character "block" effect (default: "#ABFF02") */
  tempColor?: string;
  /** Final character color after flash (default: "white") */
  finalColor?: string;
  /** Underline color on hover (default: "white") */
  lineColor?: string;
  /** Button background color (default: "rgba(255,255,255,0.15)") */
  backgroundColor?: string;
  /** Skip scroll-triggered entrance animation (default: false) */
  skip?: boolean;
}

/**
 * Hover button with GSAP character-by-character flash animation.
 * Characters flash in a colored block pattern on enter/leave,
 * with a scroll-triggered entrance animation.
 * @param {string} text - Button label text [Required]
 * @param {string} to - Optional link URL [Optional]
 * @param {string} tempColor - Flash highlight color [Optional, default: "#ABFF02"]
 * @param {string} finalColor - Resting text color [Optional, default: "white"]
 * @param {string} lineColor - Underline color [Optional, default: "white"]
 * @param {string} backgroundColor - Button background [Optional, default: "rgba(255,255,255,0.15)"]
 * @param {boolean} skip - Skip scroll entrance [Optional, default: false]
 */
export default function ButtonTilt({
  text,
  to,
  tempColor = "#ABFF02",
  finalColor = "white",
  lineColor = "white",
  backgroundColor = "rgba(255,255,255,0.15)",
  skip = false,
}: ButtonTiltProps) {
  const containerRef = useRef<HTMLElement>(null);
  const charRefs = useRef<HTMLDivElement[]>([]);
  const scrollTimeline = useRef<gsap.core.Timeline | null>(null);
  const enterTimeline = useRef<gsap.core.Timeline | null>(null);
  const leaveTimeline = useRef<gsap.core.Timeline | null>(null);

  const words = text.split(" ");

  const setCharRef = useCallback(
    (el: HTMLDivElement | null, flatIndex: number) => {
      if (el) charRefs.current[flatIndex] = el;
    },
    [],
  );

  /* Scroll entrance */
  useEffect(() => {
    const chars = charRefs.current;
    if (!chars.length) return;

    if (skip) {
      gsap.set(chars, { autoAlpha: 1 });
      return;
    }

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: containerRef.current,
        start: "top 85%",
        toggleActions: "play none none reverse",
      },
    });

    chars.forEach((charEl, i) => {
      tl.to(charEl, { autoAlpha: 1, duration: 0 }, i * 0.05);
      if (i % 2 === 0) {
        const delay = i * 0.05 + (Math.random() * 0.5 + 0.1);
        tl.fromTo(
          charEl,
          { background: tempColor, color: tempColor },
          {
            background: "transparent",
            color: finalColor,
            duration: 0.02,
            ease: "power2.out",
          },
          delay,
        );
      }
    });

    scrollTimeline.current = tl;

    return () => {
      tl.kill();
      ScrollTrigger.getAll().forEach((st) => {
        if (st.trigger === containerRef.current) st.kill();
      });
    };
  }, [skip, tempColor, finalColor]);

  const handleMouseEnter = useCallback(() => {
    if (scrollTimeline.current?.isActive()) return;
    if (leaveTimeline.current) leaveTimeline.current.revert();

    const chars = charRefs.current;
    const tl = gsap.timeline();

    chars.forEach((charEl, i) => {
      if (i % 2 === 0) {
        tl.set(
          charEl,
          { background: tempColor, color: tempColor, ease: "power2.out" },
          i * 0.025,
        );
        tl.set(
          charEl,
          { background: "transparent", color: finalColor, ease: "power2.out" },
          i * 0.025 + 0.2,
        );
      }
    });

    enterTimeline.current = tl;
  }, [tempColor, finalColor]);

  const handleMouseLeave = useCallback(() => {
    if (scrollTimeline.current?.isActive()) return;
    if (enterTimeline.current) enterTimeline.current.revert();

    const chars = charRefs.current;
    const tl = gsap.timeline();

    chars
      .map((charEl, i) => ({ charEl, index: i }))
      .filter(({ index }) => index % 2 === 1)
      .reverse()
      .forEach(({ charEl }, i) => {
        tl.set(
          charEl,
          { background: tempColor, color: tempColor, ease: "power2.out" },
          i * 0.025,
        );
        tl.set(
          charEl,
          { background: "transparent", color: finalColor, ease: "power2.out" },
          i * 0.025 + 0.2,
        );
      });

    leaveTimeline.current = tl;
  }, [tempColor, finalColor]);

  useEffect(() => {
    return () => {
      enterTimeline.current?.kill();
      leaveTimeline.current?.kill();
    };
  }, []);

  let flatIndex = 0;
  const content = (
    <div className="button-tilt--line" style={{ "--line-color": lineColor } as React.CSSProperties}>
      {words.map((word, wi) => (
        <span key={wi} style={{ display: "inline-flex" }}>
          {word.split("").map((char) => {
            const idx = flatIndex++;
            return (
              <div
                key={idx}
                ref={(el) => setCharRef(el, idx)}
                className="button-tilt--char"
              >
                {char}
              </div>
            );
          })}
        </span>
      ))}
    </div>
  );

  const style = {
    "--bg-color": backgroundColor,
    "--line-color": lineColor,
  } as React.CSSProperties;

  const sharedProps = {
    ref: containerRef as React.Ref<HTMLAnchorElement & HTMLButtonElement>,
    className: "button-tilt",
    style,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
  };

  if (to) {
    return (
      <a href={to} {...sharedProps}>
        {content}
      </a>
    );
  }

  return <button {...sharedProps}>{content}</button>;
}