Initial commit

src/components/button/ButtonElasticEffect/useElasticEffect.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef, useEffect, useCallback } from "react";
+import gsap from "gsap";
+
+const useElasticEffect = <T extends HTMLElement>() => {
+  const elementRef = useRef<T>(null);
+  const hoverLockedRef = useRef(false);
+  const timelineRef = useRef<gsap.core.Timeline | null>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    const el = elementRef.current;
+    if (!el || hoverLockedRef.current) return;
+
+    hoverLockedRef.current = true;
+    setTimeout(() => {
+      hoverLockedRef.current = false;
+    }, 500);
+
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const fs = parseFloat(getComputedStyle(el).fontSize);
+    const stretch = 0.75 * fs;
+    const sx = (w + stretch) / w;
+    const sy = (h - stretch * 0.33) / h;
+
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+    }
+
+    timelineRef.current = gsap
+      .timeline()
+      .to(el, { scaleX: sx, scaleY: sy, duration: 0.1, ease: "power1.out" })
+      .to(el, { scaleX: 1, scaleY: 1, duration: 1, ease: "elastic.out(1, 0.3)" });
+  }, []);
+
+  useEffect(() => {
+    // Skip on touch devices
+    if (window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
+      return;
+    }
+
+    const el = elementRef.current;
+    if (!el) return;
+
+    el.addEventListener("mouseenter", handleMouseEnter);
+
+    return () => {
+      el.removeEventListener("mouseenter", handleMouseEnter);
+      if (timelineRef.current) {
+        timelineRef.current.kill();
+      }
+    };
+  }, [handleMouseEnter]);
+
+  return elementRef;
+};
+
+export default useElasticEffect;