4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T311c,"use client"; /* eslint-disable @next/next/no-img-element */ import { AnimatePresence, motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, } from "motion/react"; import { type PointerEvent, useEffect, useRef, useState } from "react"; type ImageGlideItem = { src: string; alt: string; title: string; description?: string; }; type ImageGlideProps = { images?: ImageGlideItem[]; initialIndex?: number; className?: string; onIndexChange?: (index: number) => void; }; const DEFAULT_IMAGES: ImageGlideItem[] = [ { src: "/assets/images/image.jpg", alt: "Editorial scene with warm natural light", title: "Warm Frame", description: "A calm lead image with gentle depth and a soft foreground glow.", }, { src: "/assets/images/image2.jpg", alt: "Cinematic image with layered composition", title: "Soft Focus", description: "A balanced crop that keeps the motion quiet and readable.", }, { src: "/assets/images/image3.jpg", alt: "Detailed image with rich texture", title: "Textured Light", description: "Pointer movement nudges the surface without stealing attention.", }, { src: "/assets/images/image4.jpg", alt: "Wide image with natural contrast", title: "Open Field", description: "The active image settles fast so selection still feels immediate.", }, { src: "/assets/images/image5.jpg", alt: "Image with muted tones and a clean composition", title: "Quiet Tone", description: "A thumbnail rail gives the component a compact gallery rhythm.", }, { src: "/assets/images/image6.jpg", alt: "Image with warm highlights and depth", title: "Late Glow", description: "The interaction is decorative, so it backs off for reduced motion.", }, ]; const easeOut = [0.23, 1, 0.32, 1] as const; const sweepEase = [0.77, 0, 0.175, 1] as const; const sweepMs = 560; const hoverIntentMs = 70; const pointerSpring = { stiffness: 130, damping: 20, mass: 0.4, }; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } export function ImageGlide({ images = DEFAULT_IMAGES, initialIndex = 0, className, onIndexChange, }: ImageGlideProps) { const shouldReduceMotion = useReducedMotion(); const safeImages = images.length > 0 ? images : DEFAULT_IMAGES; const initialSafeIndex = Math.min(Math.max(initialIndex, 0), safeImages.length - 1); const [activeIndex, setActiveIndex] = useState(initialSafeIndex); const [previousImage, setPreviousImage] = useState(null); const [sweepKey, setSweepKey] = useState(0); const activeImage = safeImages[activeIndex] ?? safeImages[0]; const hoverIntentRef = useRef(null); const imageX = useMotionValue(0); const imageY = useMotionValue(0); const glowX = useMotionValue(0); const glowY = useMotionValue(0); const glowOpacity = useMotionValue(0); const smoothImageX = useSpring(imageX, pointerSpring); const smoothImageY = useSpring(imageY, pointerSpring); const smoothGlowX = useSpring(glowX, pointerSpring); const smoothGlowY = useSpring(glowY, pointerSpring); const smoothGlowOpacity = useSpring(glowOpacity, { stiffness: 220, damping: 26, mass: 0.5, }); const imageTransform = useMotionTemplate`translate3d(${smoothImageX}px, ${smoothImageY}px, 0px)`; const glowTransform = useMotionTemplate`translate3d(${smoothGlowX}px, ${smoothGlowY}px, 0px) translate(-50%, -50%)`; useEffect(() => { setActiveIndex((currentIndex) => Math.min(currentIndex, safeImages.length - 1)); }, [safeImages.length]); useEffect(() => { return () => { if (hoverIntentRef.current) { window.clearTimeout(hoverIntentRef.current); } }; }, []); function selectImage(index: number) { if (index === activeIndex) { return; } setPreviousImage(activeImage); setActiveIndex(index); setSweepKey((key) => key + 1); onIndexChange?.(index); } function clearHoverIntent() { if (!hoverIntentRef.current) { return; } window.clearTimeout(hoverIntentRef.current); hoverIntentRef.current = null; } function scheduleHoverSelect(index: number, pointerType: string) { if (pointerType === "touch" || index === activeIndex) { return; } clearHoverIntent(); hoverIntentRef.current = window.setTimeout(() => { selectImage(index); hoverIntentRef.current = null; }, hoverIntentMs); } useEffect(() => { if (!previousImage) { return; } const timer = window.setTimeout( () => { setPreviousImage(null); }, shouldReduceMotion ? 180 : sweepMs, ); return () => window.clearTimeout(timer); }, [previousImage, shouldReduceMotion]); function handlePointerMove(event: PointerEvent) { if (shouldReduceMotion || event.pointerType === "touch") { return; } const rect = event.currentTarget.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const progressX = x / rect.width - 0.5; const progressY = y / rect.height - 0.5; imageX.set(progressX * -10); imageY.set(progressY * -8); glowX.set(x); glowY.set(y); glowOpacity.set(1); } function resetPointerFrame() { imageX.set(0); imageY.set(0); glowOpacity.set(0); } return (

{activeImage.alt} — {String(activeIndex + 1).padStart(2, "0")} /{" "} {String(safeImages.length).padStart(2, "0")}

{activeImage.title}
{activeImage.description ? (
{activeImage.description}
) : null}

{String(activeIndex + 1).padStart(2, "0")} /{" "} {String(safeImages.length).padStart(2, "0")}

{activeImage.title}
{activeImage.description ? (
{activeImage.description}
) : null}

); } export default ImageGlide; 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/image-glide.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]