"use client"; /* eslint-disable @next/next/no-img-element -- registry components stay portable outside Next.js */ import { useId, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(useGSAP, ScrollTrigger); type RevealDirection = "left" | "right" | "top" | "bottom"; type KineticImageRevealProps = { src: string; alt: string; width: number; height: number; caption?: string; revealOn?: "mount" | "in-view" | "scroll"; direction?: RevealDirection; parallax?: number; /** Forces the final frame without animation, in addition to the OS reduced-motion preference. */ reducedMotion?: boolean; className?: string; }; const hiddenClip: Record = { left: "inset(0 100% 0 0)", right: "inset(0 0 0 100%)", top: "inset(0 0 100% 0)", bottom: "inset(100% 0 0 0)", }; // The pre-reveal state lives in markup so server-rendered HTML never paints the // image before hiding it. It only applies when motion is allowed, and the // noscript rule below keeps the image visible when JavaScript never runs. const pendingClipClass: Record = { left: "motion-safe:[clip-path:inset(0_100%_0_0)]", right: "motion-safe:[clip-path:inset(0_0_0_100%)]", top: "motion-safe:[clip-path:inset(0_0_100%_0)]", bottom: "motion-safe:[clip-path:inset(100%_0_0_0)]", }; export function KineticImageReveal({ src, alt, width, height, caption, revealOn = "in-view", direction = "left", parallax = 0, reducedMotion = false, className = "", }: KineticImageRevealProps) { const root = useRef(null); const revealId = useId(); useGSAP((_, contextSafe) => { const figure = root.current; const mask = figure?.querySelector("[data-reveal-mask]"); const image = figure?.querySelector("img"); if (!figure || !mask || !image || !contextSafe) return; if (reducedMotion) { gsap.set(mask, { clipPath: "inset(0 0 0 0)" }); gsap.set(image, { scale: 1, yPercent: 0 }); return; } const amount = Math.min(20, Math.max(0, parallax)); const media = gsap.matchMedia(); let observer: IntersectionObserver | undefined; const reveal = contextSafe(() => { gsap.fromTo( mask, { clipPath: hiddenClip[direction] }, { clipPath: "inset(0 0 0 0)", duration: 0.9, ease: "expo.out", overwrite: true }, ); gsap.fromTo( image, { scale: 1.055 }, { scale: 1, duration: 1.1, ease: "power3.out", overwrite: true }, ); }); media.add("(prefers-reduced-motion: reduce)", () => { gsap.set(mask, { clipPath: "inset(0 0 0 0)" }); gsap.set(image, { clearProps: "transform", scale: 1, yPercent: 0 }); }); media.add("(prefers-reduced-motion: no-preference)", () => { if (revealOn === "scroll") { gsap.set(mask, { clipPath: hiddenClip[direction] }); gsap.set(image, { scale: 1.075, yPercent: amount / 2 }); gsap.timeline({ scrollTrigger: { trigger: figure, start: "top 88%", end: "bottom 24%", scrub: 0.65, invalidateOnRefresh: true, }, }) .to(mask, { clipPath: "inset(0 0 0 0)", ease: "none" }, 0) .to(image, { scale: 1, yPercent: -amount / 2, ease: "none" }, 0); return; } gsap.set(mask, { clipPath: hiddenClip[direction] }); if (revealOn === "mount") { reveal(); return; } observer = new IntersectionObserver((entries) => { if (!entries[0]?.isIntersecting) return; reveal(); observer?.disconnect(); }, { threshold: 0.3 }); observer.observe(figure); }); const refresh = () => ScrollTrigger.refresh(); if (revealOn === "scroll" && !image.complete) image.addEventListener("load", refresh, { once: true }); return () => { observer?.disconnect(); image.removeEventListener("load", refresh); media.revert(); }; }, { scope: root, dependencies: [direction, parallax, revealOn, reducedMotion], revertOnUpdate: true }); return (

); }