{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GridMotion-TS-TW",
	"title": "GridMotion",
	"description": "Perspective moving grid lines based on cusror position.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "GridMotion/GridMotion.tsx",
			"content": "import { useEffect, useRef, type FC, type ReactNode } from 'react';\nimport { gsap } from 'gsap';\n\ninterface GridMotionProps {\n  items?: (string | ReactNode)[];\n  gradientColor?: string;\n}\n\nconst GridMotion: FC<GridMotionProps> = ({ items = [], gradientColor = 'black' }) => {\n  const gridRef = useRef<HTMLDivElement>(null);\n  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const mouseXRef = useRef<number>(window.innerWidth / 2);\n\n  const totalItems = 28;\n  const defaultItems = Array.from({ length: totalItems }, (_, index) => `Item ${index + 1}`);\n  const combinedItems = items.length > 0 ? items.slice(0, totalItems) : defaultItems;\n\n  useEffect(() => {\n    gsap.ticker.lagSmoothing(0);\n\n    const handleMouseMove = (e: MouseEvent): void => {\n      mouseXRef.current = e.clientX;\n    };\n\n    const updateMotion = (): void => {\n      const maxMoveAmount = 300;\n      const baseDuration = 0.8;\n      const inertiaFactors = [0.6, 0.4, 0.3, 0.2];\n\n      rowRefs.current.forEach((row, index) => {\n        if (row) {\n          const direction = index % 2 === 0 ? 1 : -1;\n          const moveAmount = ((mouseXRef.current / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;\n\n          gsap.to(row, {\n            x: moveAmount,\n            duration: baseDuration + inertiaFactors[index % inertiaFactors.length],\n            ease: 'power3.out',\n            overwrite: 'auto'\n          });\n        }\n      });\n    };\n\n    const removeAnimationLoop = gsap.ticker.add(updateMotion);\n    window.addEventListener('mousemove', handleMouseMove);\n\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      removeAnimationLoop();\n    };\n  }, []);\n\n  return (\n    <div ref={gridRef} className=\"h-full w-full overflow-hidden\">\n      <section\n        className=\"w-full h-screen overflow-hidden relative flex items-center justify-center\"\n        style={{\n          background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`\n        }}\n      >\n        <div className=\"absolute inset-0 pointer-events-none z-[4] bg-[length:250px]\"></div>\n        <div className=\"gap-4 flex-none relative w-[150vw] h-[150vh] grid grid-rows-4 grid-cols-1 rotate-[-15deg] origin-center z-[2]\">\n          {Array.from({ length: 4 }, (_, rowIndex) => (\n            <div\n              key={rowIndex}\n              className=\"grid gap-4 grid-cols-7\"\n              style={{ willChange: 'transform, filter' }}\n              ref={el => {\n                if (el) rowRefs.current[rowIndex] = el;\n              }}\n            >\n              {Array.from({ length: 7 }, (_, itemIndex) => {\n                const content = combinedItems[rowIndex * 7 + itemIndex];\n                return (\n                  <div key={itemIndex} className=\"relative\">\n                    <div className=\"relative w-full h-full overflow-hidden rounded-[10px] bg-[#111] flex items-center justify-center text-white text-[1.5rem]\">\n                      {typeof content === 'string' && content.startsWith('http') ? (\n                        <div\n                          className=\"w-full h-full bg-cover bg-center absolute top-0 left-0\"\n                          style={{ backgroundImage: `url(${content})` }}\n                        ></div>\n                      ) : (\n                        <div className=\"p-4 text-center z-[1]\">{content}</div>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <div className=\"relative w-full h-full top-0 left-0 pointer-events-none\"></div>\n      </section>\n    </div>\n  );\n};\n\nexport default GridMotion;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}