4e: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"] 4f: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"] 50:T1fc3,"use client"; import { useRef } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A stack of photos that chases the cursor. Every card follows the same path a little later than // the one above it, so the stack stretches into a trail when you move and gathers when you stop. // On touch screens (or always, if you ask) it drifts along a slow loop by itself. export type MouseTrailProps = { /** The photos, top card first. Six to twelve look best. */ images: string[]; /** Width of each card, in pixels. */ imageWidth?: number; /** Height of each card, in pixels. */ imageHeight?: number; /** How far behind the card above it each card runs, in seconds. */ stagger?: number; /** How long a card takes to catch up with its spot, in seconds. */ duration?: number; /** The GSAP ease of that catch-up, e.g. "power2.out" or "expo.out". */ ease?: string; /** When the stack drifts by itself: on touch screens only, always (whenever no pointer is over it) or never. */ autoplay?: "touch" | "always" | "never"; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Extra classes for each card, e.g. a radius or a shadow. */ imageClassName?: string; }; type Point = { t: number; x: number; y: number }; export function MouseTrail({ images, imageWidth = 170, imageHeight = 238, stagger = 0.04, duration = 0.5, ease = "power3.out", autoplay = "touch", className = "", imageClassName = "rounded-[4px] shadow-[0_16px_34px_-14px_rgba(0,0,0,0.3)]", }: MouseTrailProps) { const boxRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Read on every frame, so a new stagger doesn't rebuild anything const staggerRef = useRef(stagger); staggerRef.current = stagger; useGSAP( (_context, contextSafe) => { const box = boxRef.current; const cards = cardRefs.current.slice(0, images.length).filter((card): card is HTMLDivElement => card !== null); if (!box || cards.length === 0 || !contextSafe) return; gsap.set(cards, { xPercent: -50, yPercent: -50, x: box.clientWidth / 2, y: box.clientHeight / 2, force3D: true }); // Reduced motion: no chase. The stack sits in the middle, fanned out a little, and stays put. const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: reduce)", () => { const middle = (cards.length - 1) / 2; gsap.set(cards.map((card) => card.firstElementChild), { opacity: 1 }); gsap.set(cards, { opacity: 1, left: "50%", top: "50%", x: 0, y: 0, rotation: (i: number) => (i - middle) * 4, xPercent: (i: number) => -50 + (i - middle) * 6 }); }); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) return () => mm.revert(); const touchScreen = window.matchMedia("(hover: none)").matches; const drifts = autoplay === "always" || (autoplay === "touch" && touchScreen); // One quickTo per card and axis: cheap to call every frame, eased toward the newest value const moveX = cards.map((card) => gsap.quickTo(card, "x", { duration, ease })); const moveY = cards.map((card) => gsap.quickTo(card, "y", { duration, ease })); // A card that sits right under the one above it is hidden, so ten shadows don't pile up // into a dark halo when the stack gathers. It fades in as it pulls away. const fade = cards.map((card) => gsap.quickSetter(card.firstElementChild, "opacity")); // Where the trail's head has been, so each card can be sent where the head was a moment ago const history: Point[] = []; const target = { x: box.clientWidth / 2, y: box.clientHeight / 2 }; let pointerInside = false; let lastInput = -Infinity; let shown = false; let visible = true; let clock = 0; const show = (on: boolean) => { if (on === shown) return; shown = on; gsap.to(cards, { opacity: on ? 1 : 0, duration: on ? 0.25 : 0.4, ease: "power2.out", stagger: on ? staggerRef.current / 2 : 0, overwrite: "auto" }); }; const pointAt = (time: number): Point => { for (let i = history.length - 1; i >= 0; i--) if (history[i]!.t <= time) return history[i]!; return history[0] ?? { t: time, x: target.x, y: target.y }; }; const tick = (seconds: number) => { if (!visible) return; clock = seconds; const idle = seconds - lastInput > 1.2 && !pointerInside; if (drifts && idle) { // A slow figure of eight around the middle of the box const w = box.clientWidth; const h = box.clientHeight; target.x = w / 2 + Math.sin(seconds * 0.8) * w * 0.28; target.y = h / 2 + Math.sin(seconds * 1.6) * h * 0.2; show(true); } history.push({ t: seconds, x: target.x, y: target.y }); const keep = cards.length * staggerRef.current + 0.5; while (history.length > 2 && history[0]!.t < seconds - keep) history.shift(); cards.forEach((_, i) => { const point = pointAt(seconds - i * staggerRef.current); moveX[i]!(point.x); moveY[i]!(point.y); if (i === 0) return; const above = cards[i - 1]!; const gap = Math.hypot(Number(gsap.getProperty(cards[i]!, "x")) - Number(gsap.getProperty(above, "x")), Number(gsap.getProperty(cards[i]!, "y")) - Number(gsap.getProperty(above, "y"))); fade[i]!(Math.min(1, gap / 20)); }); }; gsap.ticker.add(tick); const place = (event: PointerEvent) => { const rect = box.getBoundingClientRect(); target.x = event.clientX - rect.left; target.y = event.clientY - rect.top; lastInput = clock; }; const onPointerMove = contextSafe((event: PointerEvent) => { if (!event.isPrimary) return; place(event); show(true); }); const onPointerEnter = contextSafe((event: PointerEvent) => { if (event.pointerType === "mouse" || event.pointerType === "pen") pointerInside = true; }); const onPointerDown = contextSafe((event: PointerEvent) => { if (!event.isPrimary) return; place(event); show(true); }); const onPointerLeave = contextSafe(() => { pointerInside = false; if (!drifts) show(false); }); box.addEventListener("pointermove", onPointerMove); box.addEventListener("pointerenter", onPointerEnter); box.addEventListener("pointerdown", onPointerDown); box.addEventListener("pointerleave", onPointerLeave); // No work while the box is off screen const visibility = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; }); visibility.observe(box); return () => { gsap.ticker.remove(tick); visibility.disconnect(); box.removeEventListener("pointermove", onPointerMove); box.removeEventListener("pointerenter", onPointerEnter); box.removeEventListener("pointerdown", onPointerDown); box.removeEventListener("pointerleave", onPointerLeave); mm.revert(); }; }, { scope: boxRef, dependencies: [images.length, duration, ease, autoplay], revertOnUpdate: true }, ); return (

{images.map((src, index) => (

{ cardRefs.current[index] = card; }} className="pointer-events-none absolute top-0 left-0 opacity-0" style={{ width: imageWidth, height: imageHeight, zIndex: images.length - index, willChange: "transform, opacity" }} >

))}

); } 4d:["$","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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","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":"@gsap/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/mouse-trail/mouse-trail.tsx","content":"$50","type":"registry:component","target":"components/dimaac/mouse-trail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]