{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax-grid",
  "title": "Parallax Grid",
  "description": "Gallery columns drifting at different rates for depth.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/parallax-grid.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\nimport { motion, useScroll, useTransform } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface ParallaxGridProps {\n  /** Each child becomes one tile; columns drift at different speeds */\n  children: React.ReactNode[];\n  /** Maximum vertical drift in px */\n  depth?: number;\n  className?: string;\n}\n\n/**\n * Image or card grid whose columns drift at different rates as the page\n * scrolls, giving a gallery a sense of depth. Under `prefers-reduced-motion`\n * a CSS override pins every tile in place.\n */\nexport function ParallaxGrid({\n  children,\n  depth = 90,\n  className,\n}: ParallaxGridProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start end\", \"end start\"],\n  });\n\n  // Three columns: outer ones lead, the middle one lags.\n  const fast = useTransform(scrollYProgress, [0, 1], [depth, -depth]);\n  const slow = useTransform(scrollYProgress, [0, 1], [depth * 0.4, -depth * 0.4]);\n  const lagging = useTransform(scrollYProgress, [0, 1], [-depth * 0.3, depth * 0.3]);\n  const tracks = [fast, lagging, slow];\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"parallax-grid\"\n      className={cn(\"grid grid-cols-2 gap-4 md:grid-cols-3\", className)}\n    >\n      {children.map((child, i) => (\n        <motion.div\n          key={i}\n          style={{ y: tracks[i % 3] }}\n          className=\"will-change-transform motion-reduce:transform-none!\"\n        >\n          {child}\n        </motion.div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/parallax-grid.tsx"
    }
  ],
  "type": "registry:ui"
}