{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-parallax",
  "type": "registry:ui",
  "title": "Parallax",
  "description": "Move foreground and background at restrained relative speeds to create depth.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "scroll"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/parallax/",
  "files": [
    {
      "path": "src/registry/primitives/parallax.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/parallax.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, useScroll, useTransform } from \"motion/react\";\nimport { useRef, type ReactNode, type RefObject } from \"react\";\n\nexport type ParallaxPrimitiveProps = {\n  children: ReactNode;\n  distance?: number;\n  speed?: number;\n  axis?: \"x\" | \"y\";\n  containerRef?: RefObject<HTMLElement | null>;\n  className?: string;\n};\n\nexport function ParallaxPrimitive({\n  children,\n  distance = 48,\n  speed = 0.35,\n  axis = \"y\",\n  containerRef,\n  className,\n}: ParallaxPrimitiveProps) {\n  const target = useRef<HTMLDivElement>(null);\n  const reduceMotion = useReducedMotion();\n  const { scrollYProgress } = useScroll({\n    target,\n    container: containerRef,\n    offset: [\"start end\", \"end start\"],\n  });\n  const range = distance * Math.max(0.1, Math.min(0.8, speed));\n  const travel = useTransform(scrollYProgress, [0, 1], [range, -range]);\n  const transform = useTransform(travel, (value) =>\n    reduceMotion\n      ? \"translate3d(0, 0, 0)\"\n      : axis === \"x\"\n        ? `translate3d(${value}px, 0, 0)`\n        : `translate3d(0, ${value}px, 0)`,\n  );\n\n  return (\n    <motion.div ref={target} className={className} style={{ transform }}>\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}