{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-mousetrail-without-component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/mousetrail/without-component-mousetrail.tsx",
      "content": "//@ts-nocheck\n'use client';\nimport { items } from '@/components/website/constant';\nimport React, { createRef, useRef } from 'react';\n\nexport default function ImageMouseTrail3() {\n  const containerRef = useRef(null);\n  const refs = useRef(items.map(() => createRef<HTMLImageElement>()));\n\n  let globalIndex = 0;\n  let last = { x: 0, y: 0 };\n\n  const activate = (image, x, y) => {\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\n    image.style.zIndex = (globalIndex % items.length) + 1;\n\n    image.dataset.status = 'active';\n    setTimeout(() => {\n      image.dataset.status = 'inactive';\n    }, 1000);\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  const handleOnMove = (e) => {\n    if (distanceFromLast(e.clientX, e.clientY) > window.innerWidth / 20) {\n      const lead = refs.current[globalIndex % refs.current.length].current;\n\n      const tail = refs.current[(globalIndex - 5) % refs.current.length]?.current;\n\n      if (lead) activate(lead, e.clientX, e.clientY);\n      if (tail) deactivate(tail);\n\n      globalIndex++;\n    }\n  };\n\n  return (\n    <section\n      onMouseMove={handleOnMove}\n      onTouchMove={(e) => handleOnMove(e.touches[0])}\n      ref={containerRef}\n      className='grid place-content-center h-[600px] w-full bg-[#e0dfdf] relative overflow-hidden rounded-lg'\n    >\n      {items.map((item, index) => (\n        <img\n          key={item.src}\n          className=\"object-cover z-10   w-40 h-48 scale-0 opacity:0 data-[status='active']:scale-100  data-[status='active']:opacity-100 transition-transform duration-500 data-[status='active']:ease-out-expo  absolute  -translate-y-[50%] -translate-x-[50%]\"\n          data-index={index}\n          data-status='inactive'\n          src={item.url}\n          alt={`image-${index}`}\n          ref={refs.current[index]}\n        />\n      ))}\n      <article className='relative z-20 mix-blend-difference'>\n        <h1 className='md:text-4xl text-2xl text-center font-semibold'>\n          ✨ Experience Interactive Designs <br />\n          with Dynamic Mouse Trails <br />\n          built with Tailwind CSS\n        </h1>\n      </article>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}