{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-mousetrail-small",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/mousetrail.tsx",
      "content": "// @ts-nocheck\n'use client';\nimport { cn } from '@/lib/utils';\nimport { type ReactNode, createRef, useRef } from 'react';\n\ninterface ImageMouseTrailProps {\n  items: string[];\n  children?: ReactNode;\n  className?: string;\n  imgClass?: string;\n  distance?: number;\n  maxNumberOfImages?: number;\n  fadeAnimation?: boolean;\n}\nexport default function ImageMouseTrail({\n  items,\n  children,\n  className,\n  maxNumberOfImages = 5,\n  imgClass = 'w-40 h-48',\n  distance = 20,\n  fadeAnimation = false,\n}: ImageMouseTrailProps) {\n  const containerRef = useRef(null);\n  const refs = useRef(items.map(() => createRef<HTMLImageElement>()));\n  const currentZIndexRef = useRef(1);\n\n  let globalIndex = 0;\n  let last = { x: 0, y: 0 };\n\n  const activate = (image: HTMLImageElement, x: number, y: number) => {\n    const containerRect = containerRef.current?.getBoundingClientRect();\n    const relativeX = x - containerRect.left;\n    const relativeY = y - containerRect.top;\n    image.style.left = `${relativeX}px`;\n    image.style.top = `${relativeY}px`;\n    console.log(refs.current[refs.current?.length - 1]);\n\n    if (currentZIndexRef.current > 40) {\n      currentZIndexRef.current = 1;\n    }\n    image.style.zIndex = String(currentZIndexRef.current);\n    currentZIndexRef.current++;\n\n    image.dataset.status = 'active';\n    if (fadeAnimation) {\n      setTimeout(() => {\n        image.dataset.status = 'inactive';\n      }, 1500);\n    }\n    last = { x, y };\n  };\n\n  const distanceFromLast = (x, y) => {\n    return Math.hypot(x - last.x, y - last.y);\n  };\n  const deactivate = (image) => {\n    image.dataset.status = 'inactive';\n  };\n\n  const handleOnMove = (e) => {\n    if (distanceFromLast(e.clientX, e.clientY) > window.innerWidth / distance) {\n      // console.log(e.clientX, e.clientY)\n\n      const lead = refs.current[globalIndex % refs.current.length].current;\n\n      const tail = refs.current[(globalIndex - maxNumberOfImages) % refs.current.length]?.current;\n\n      if (lead) activate(lead, e.clientX, e.clientY);\n      if (tail) deactivate(tail);\n      globalIndex++;\n    }\n  };\n\n  return (\n    <section\n      onMouseMove={handleOnMove}\n      onTouchMove={(e) => handleOnMove(e.touches[0])}\n      ref={containerRef}\n      className={cn(\n        'grid place-content-center h-[600px] w-full bg-[#e0dfdf] relative overflow-hidden rounded-lg',\n        className\n      )}\n    >\n      {items.map((item, index) => (\n        <>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            key={item.src}\n            className={cn(\n              \"object-cover  scale-0 opacity:0 data-[status='active']:scale-100  data-[status='active']:opacity-100 transition-transform data-[status='active']:duration-500 duration-300 data-[status='active']:ease-out-expo  absolute   -translate-y-[50%] -translate-x-[50%] \",\n              imgClass\n            )}\n            data-index={index}\n            data-status='inactive'\n            src={item}\n            alt={`image-${index}`}\n            ref={refs.current[index]}\n          />\n        </>\n      ))}\n      {children}\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/mousetrail/small-images.tsx",
      "content": "'use client';\nimport React from 'react';\n\nimport ImageMouseTrail from '@/components/ui/mousetrail';\n\nconst images = [\n  'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1462989856370-729a9c1e2c91?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1546942113-a6c43b63104a?q=80&w=1200&auto=format',\n  'https://images.unsplash.com/photo-1726551195764-f98a8e8a57c3?q=80&w=1200&auto=format',\n];\nexport default function SmallImages() {\n  return (\n    <section>\n      <ImageMouseTrail\n        items={images}\n        maxNumberOfImages={9}\n        distance={35}\n        imgClass='w-20 h-24'\n        className='bg-white text-black'\n      >\n        <article className='relative z-50 '>\n          <h1 className='xl:text-[7em] sm:text-6xl text-4xl text-center font-semibold '>\n            ✨Experience\n          </h1>\n        </article>\n      </ImageMouseTrail>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}