4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tc1c,// @ts-nocheck 'use client'; import { cn } from '@/lib/utils'; import { type ReactNode, createRef, useRef } from 'react'; interface ImageMouseTrailProps { items: string[]; children?: ReactNode; className?: string; imgClass?: string; distance?: number; maxNumberOfImages?: number; fadeAnimation?: boolean; } export default function ImageMouseTrail({ items, children, className, maxNumberOfImages = 5, imgClass = 'w-40 h-48', distance = 20, fadeAnimation = false, }: ImageMouseTrailProps) { const containerRef = useRef(null); const refs = useRef(items.map(() => createRef())); const currentZIndexRef = useRef(1); let globalIndex = 0; let last = { x: 0, y: 0 }; const activate = (image: HTMLImageElement, x: number, y: number) => { const containerRect = containerRef.current?.getBoundingClientRect(); const relativeX = x - containerRect.left; const relativeY = y - containerRect.top; image.style.left = `${relativeX}px`; image.style.top = `${relativeY}px`; console.log(refs.current[refs.current?.length - 1]); if (currentZIndexRef.current > 40) { currentZIndexRef.current = 1; } image.style.zIndex = String(currentZIndexRef.current); currentZIndexRef.current++; image.dataset.status = 'active'; if (fadeAnimation) { setTimeout(() => { image.dataset.status = 'inactive'; }, 1500); } last = { x, y }; }; const distanceFromLast = (x, y) => { return Math.hypot(x - last.x, y - last.y); }; const deactivate = (image) => { image.dataset.status = 'inactive'; }; const handleOnMove = (e) => { if (distanceFromLast(e.clientX, e.clientY) > window.innerWidth / distance) { // console.log(e.clientX, e.clientY) const lead = refs.current[globalIndex % refs.current.length].current; const tail = refs.current[(globalIndex - maxNumberOfImages) % refs.current.length]?.current; if (lead) activate(lead, e.clientX, e.clientY); if (tail) deactivate(tail); globalIndex++; } }; return (

handleOnMove(e.touches[0])} ref={containerRef} className={cn( 'grid place-content-center h-[600px] w-full bg-[#e0dfdf] relative overflow-hidden rounded-lg', className )} > {items.map((item, index) => ( <> {/* eslint-disable-next-line @next/next/no-img-element */} {`image-${index}`}

))} {children}

); } 53:T5d7,'use client'; import React from 'react'; import ImageMouseTrail from '@/components/ui/mousetrail'; const images = [ 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format', 'https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format', ]; export default function DefaultMousetrail() { return (

✨ Experience Interactive Designs with
Dynamic Mouse Trails

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui-layouts.com/r/image-mousetrail-default.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/image-mousetrail-default","itemId":"@ui-layouts/image-mousetrail-default"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"./components/ui/mousetrail.tsx","content":"$52","type":"registry:component"},{"path":"./registry/components/mousetrail/default-mousetrail.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

✨ Experience Interactive Designs with Dynamic Mouse Trails

✨ Experience Interactive Designs with
Dynamic Mouse Trails

Image Mousetrail Default

Installation

Files

components

Styles