50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T19b3,"use client"; import { AnimatePresence, motion, type TargetAndTransition, useReducedMotion, } from "motion/react"; import { type ReactNode, useEffect, useRef, useState } from "react"; import { motionTransition } from "@/lib/sona-motion"; import { cn } from "@/lib/sona-utils"; type ImageTrailVariant = "scale" | "fade" | "blur" | "rise" | "tilt"; export interface ImageTrailProps { /** Image sources spawned in order as the pointer moves. */ images: string[]; /** The content the effect is scoped to; the trail only spawns over this area. */ children: ReactNode; /** Additional CSS classes for the container. */ className?: string; /** Extra classes for each trail image (use for sizing, e.g. `"w-48"`). @default "w-40" */ itemClassName?: string; /** * Pointer distance in pixels travelled before the next image spawns. * @default 80 */ threshold?: number; /** * Maximum number of images alive at once. * @default 8 */ maxImages?: number; /** * How long an image stays before it animates out, in milliseconds. * @default 600 */ lifetime?: number; /** * Entrance and exit animation style. * @default "scale" */ variant?: "scale" | "fade" | "blur" | "rise" | "tilt"; /** * CSS selector for elements that suppress the effect when hovered, keeping * interactive UI unobstructed. * @default "a, button, input, [data-image-trail-ignore]" */ ignoreSelector?: string; /** * z-index of the trail layer. * @default 10 */ zIndex?: number; } interface TrailItem { id: number; src: string; x: number; y: number; rotate: number; } const VARIANTS: Record< ImageTrailVariant, { initial: TargetAndTransition; animate: TargetAndTransition; exit: TargetAndTransition; } > = { scale: { initial: { opacity: 0, scale: 0.4 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, }, fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, }, blur: { initial: { opacity: 0, filter: "blur(12px)" }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, filter: "blur(8px)" }, }, rise: { initial: { opacity: 0, y: 24 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -24 }, }, tilt: { initial: { opacity: 0, scale: 0.6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, }, }; export default function ImageTrail({ images, children, className, itemClassName = "w-40", threshold = 80, maxImages = 8, lifetime = 600, variant = "scale", ignoreSelector = "a, button, input, [data-image-trail-ignore]", zIndex = 10, }: ImageTrailProps) { const prefersReducedMotion = useReducedMotion(); const [trail, setTrail] = useState([]); const lastPos = useRef<{ x: number; y: number } | null>(null); const containerRect = useRef(null); const imageIndex = useRef(0); const idCounter = useRef(0); const timers = useRef>>(new Set()); const preloadedImages = useRef(new Set()); // Clear any pending removals when the component unmounts. useEffect(() => { const pending = timers.current; return () => { pending.forEach(clearTimeout); pending.clear(); }; }, []); // Decode the images before the first interaction so pointer movement does // not compete with image loading and decoding. useEffect(() => { images.forEach((src) => { if (preloadedImages.current.has(src)) return; preloadedImages.current.add(src); const image = new Image(); image.src = src; }); }, [images]); const handlePointerMove = (event: React.PointerEvent) => { if (prefersReducedMotion || event.pointerType !== "mouse") return; // Over interactive UI: stop spawning and fast-clear live images so they // don't obstruct it. Their exit animation still plays via AnimatePresence. if ((event.target as Element).closest(ignoreSelector)) { timers.current.forEach(clearTimeout); timers.current.clear(); lastPos.current = null; setTrail((prev) => (prev.length ? [] : prev)); return; } const rect = containerRect.current ?? event.currentTarget.getBoundingClientRect(); containerRect.current = rect; const x = event.clientX - rect.left; const y = event.clientY - rect.top; const last = lastPos.current; if (last && Math.hypot(x - last.x, y - last.y) < threshold) return; lastPos.current = { x, y }; const src = images[imageIndex.current % images.length]; imageIndex.current += 1; const id = idCounter.current++; const rotate = (Math.random() - 0.5) * (variant === "tilt" ? 24 : 8); setTrail((prev) => { const next = [...prev, { id, src, x, y, rotate }]; return next.length > maxImages ? next.slice(next.length - maxImages) : next; }); const timer = setTimeout(() => { setTrail((prev) => prev.filter((item) => item.id !== id)); timers.current.delete(timer); }, lifetime); timers.current.add(timer); }; const active = VARIANTS[variant]; return (

{ containerRect.current = event.currentTarget.getBoundingClientRect(); }} onPointerLeave={() => { lastPos.current = null; containerRect.current = null; }} className={cn("relative overflow-hidden", className)} > {children}

); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils","@sona-ui/sona-motion"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/sonaui/image-trail/image-trail.tsx","content":"$52","type":"registry:ui","target":"components/ui/image-trail/image-trail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]