{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"image-glide","title":"Image Glide","author":"CoDesign-Spa27","description":"An image viewer with pointer depth, soft image transitions, and a compact thumbnail rail.","dependencies":["motion"],"files":[{"path":"components/ui-components/image-glide.tsx","content":"\"use client\";\n\n/* eslint-disable @next/next/no-img-element */\n\nimport {\n AnimatePresence,\n motion,\n useMotionTemplate,\n useMotionValue,\n useReducedMotion,\n useSpring,\n} from \"motion/react\";\nimport { type PointerEvent, useEffect, useRef, useState } from \"react\";\n\ntype ImageGlideItem = {\n src: string;\n alt: string;\n title: string;\n description?: string;\n};\n\ntype ImageGlideProps = {\n images?: ImageGlideItem[];\n initialIndex?: number;\n className?: string;\n onIndexChange?: (index: number) => void;\n};\n\nconst DEFAULT_IMAGES: ImageGlideItem[] = [\n {\n src: \"/assets/images/image.jpg\",\n alt: \"Editorial scene with warm natural light\",\n title: \"Warm Frame\",\n description: \"A calm lead image with gentle depth and a soft foreground glow.\",\n },\n {\n src: \"/assets/images/image2.jpg\",\n alt: \"Cinematic image with layered composition\",\n title: \"Soft Focus\",\n description: \"A balanced crop that keeps the motion quiet and readable.\",\n },\n {\n src: \"/assets/images/image3.jpg\",\n alt: \"Detailed image with rich texture\",\n title: \"Textured Light\",\n description: \"Pointer movement nudges the surface without stealing attention.\",\n },\n {\n src: \"/assets/images/image4.jpg\",\n alt: \"Wide image with natural contrast\",\n title: \"Open Field\",\n description: \"The active image settles fast so selection still feels immediate.\",\n },\n {\n src: \"/assets/images/image5.jpg\",\n alt: \"Image with muted tones and a clean composition\",\n title: \"Quiet Tone\",\n description: \"A thumbnail rail gives the component a compact gallery rhythm.\",\n },\n {\n src: \"/assets/images/image6.jpg\",\n alt: \"Image with warm highlights and depth\",\n title: \"Late Glow\",\n description: \"The interaction is decorative, so it backs off for reduced motion.\",\n },\n];\n\nconst easeOut = [0.23, 1, 0.32, 1] as const;\nconst sweepEase = [0.77, 0, 0.175, 1] as const;\nconst sweepMs = 560;\nconst hoverIntentMs = 70;\nconst pointerSpring = {\n stiffness: 130,\n damping: 20,\n mass: 0.4,\n};\n\nfunction cn(...classes: Array) {\n return classes.filter(Boolean).join(\" \");\n}\n\nexport function ImageGlide({\n images = DEFAULT_IMAGES,\n initialIndex = 0,\n className,\n onIndexChange,\n}: ImageGlideProps) {\n const shouldReduceMotion = useReducedMotion();\n const safeImages = images.length > 0 ? images : DEFAULT_IMAGES;\n const initialSafeIndex = Math.min(Math.max(initialIndex, 0), safeImages.length - 1);\n const [activeIndex, setActiveIndex] = useState(initialSafeIndex);\n const [previousImage, setPreviousImage] = useState(null);\n const [sweepKey, setSweepKey] = useState(0);\n const activeImage = safeImages[activeIndex] ?? safeImages[0];\n const hoverIntentRef = useRef(null);\n\n const imageX = useMotionValue(0);\n const imageY = useMotionValue(0);\n const glowX = useMotionValue(0);\n const glowY = useMotionValue(0);\n const glowOpacity = useMotionValue(0);\n\n const smoothImageX = useSpring(imageX, pointerSpring);\n const smoothImageY = useSpring(imageY, pointerSpring);\n const smoothGlowX = useSpring(glowX, pointerSpring);\n const smoothGlowY = useSpring(glowY, pointerSpring);\n const smoothGlowOpacity = useSpring(glowOpacity, {\n stiffness: 220,\n damping: 26,\n mass: 0.5,\n });\n const imageTransform = useMotionTemplate`translate3d(${smoothImageX}px, ${smoothImageY}px, 0px)`;\n const glowTransform = useMotionTemplate`translate3d(${smoothGlowX}px, ${smoothGlowY}px, 0px) translate(-50%, -50%)`;\n\n useEffect(() => {\n setActiveIndex((currentIndex) => Math.min(currentIndex, safeImages.length - 1));\n }, [safeImages.length]);\n\n useEffect(() => {\n return () => {\n if (hoverIntentRef.current) {\n window.clearTimeout(hoverIntentRef.current);\n }\n };\n }, []);\n\n function selectImage(index: number) {\n if (index === activeIndex) {\n return;\n }\n\n setPreviousImage(activeImage);\n setActiveIndex(index);\n setSweepKey((key) => key + 1);\n onIndexChange?.(index);\n }\n\n function clearHoverIntent() {\n if (!hoverIntentRef.current) {\n return;\n }\n\n window.clearTimeout(hoverIntentRef.current);\n hoverIntentRef.current = null;\n }\n\n function scheduleHoverSelect(index: number, pointerType: string) {\n if (pointerType === \"touch\" || index === activeIndex) {\n return;\n }\n\n clearHoverIntent();\n hoverIntentRef.current = window.setTimeout(() => {\n selectImage(index);\n hoverIntentRef.current = null;\n }, hoverIntentMs);\n }\n\n useEffect(() => {\n if (!previousImage) {\n return;\n }\n\n const timer = window.setTimeout(\n () => {\n setPreviousImage(null);\n },\n shouldReduceMotion ? 180 : sweepMs,\n );\n\n return () => window.clearTimeout(timer);\n }, [previousImage, shouldReduceMotion]);\n\n function handlePointerMove(event: PointerEvent) {\n if (shouldReduceMotion || event.pointerType === \"touch\") {\n return;\n }\n\n const rect = event.currentTarget.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n const progressX = x / rect.width - 0.5;\n const progressY = y / rect.height - 0.5;\n\n imageX.set(progressX * -10);\n imageY.set(progressY * -8);\n glowX.set(x);\n glowY.set(y);\n glowOpacity.set(1);\n }\n\n function resetPointerFrame() {\n imageX.set(0);\n imageY.set(0);\n glowOpacity.set(0);\n }\n\n return (\n
\n
\n
\n \n \n \n \n \n \n\n \n {previousImage && !shouldReduceMotion ? (\n \n \n
\n \n ) : null}\n \n\n \n {previousImage && !shouldReduceMotion ? (\n \n
\n
\n \n ) : null}\n \n\n
\n \n
\n
\n

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

\n

\n {activeImage.title}\n

\n {activeImage.description ? (\n

\n {activeImage.description}\n

\n ) : null}\n
\n
\n
\n
\n\n
\n {safeImages.map((image, index) => {\n const isActive = index === activeIndex;\n\n return (\n selectImage(index)}\n onPointerEnter={(event) => scheduleHoverSelect(index, event.pointerType)}\n onPointerLeave={clearHoverIntent}\n type=\"button\"\n >\n \n {isActive ? (\n \n ) : null}\n \n );\n })}\n
\n
\n
\n );\n}\n\nexport default ImageGlide;\n","type":"registry:ui"}],"categories":["gallery","carousel"],"type":"registry:ui"}