"use client"; import { useEffect } from "react"; import Lenis from "lenis"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function SmoothScroll() { useEffect(() => { // Respect reduced-motion: skip momentum scrolling entirely. if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { ScrollTrigger.refresh(); return; } const lenis = new Lenis({ duration: 1.15, smoothWheel: true, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), }); lenis.on("scroll", ScrollTrigger.update); const ticker = (time: number) => lenis.raf(time * 1000); gsap.ticker.add(ticker); gsap.ticker.lagSmoothing(0); // Anchor links should route through Lenis for the smooth glide. const onClick = (e: MouseEvent) => { const a = (e.target as HTMLElement).closest('a[href^="#"]'); if (!a) return; const id = a.getAttribute("href"); if (!id || id === "#") return; const target = document.querySelector(id); if (target) { e.preventDefault(); lenis.scrollTo(target as HTMLElement, { offset: -20 }); } }; document.addEventListener("click", onClick); return () => { document.removeEventListener("click", onClick); gsap.ticker.remove(ticker); lenis.destroy(); }; }, []); return null; }