{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax-panel",
  "type": "registry:component",
  "title": "Parallax panel",
  "description": "A panel where the heading text and a glowing accent orb move at different speeds as you scroll, giving scroll linked parallax depth with transforms only.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/parallax-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/parallax-panel.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, useScroll, useTransform } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction ParallaxPanel({\n  title = \"Depth without blur shadows\",\n  body = \"Scroll-linked motion stays Hairline-legal: transforms only.\",\n  className,\n}: {\n  title?: string\n  body?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { scrollYProgress } = useScroll({ target: ref, offset: [\"start end\", \"end start\"] })\n  const y = useTransform(scrollYProgress, [0, 1], reduce ? [0, 0] : [36, -36])\n  const y2 = useTransform(scrollYProgress, [0, 1], reduce ? [0, 0] : [-20, 20])\n  return (\n    <div ref={ref} data-slot=\"parallax-panel\" data-tier=\"premium\" className={cn(\"relative overflow-hidden rounded-2xl border border-border bg-sunken p-10\", className)}>\n      <motion.div style={{ y: y2 }} aria-hidden className=\"pointer-events-none absolute -right-8 -top-8 size-40 rounded-full bg-[radial-gradient(circle,color-mix(in_oklch,var(--accent)_22%,transparent),transparent_70%)]\" />\n      <motion.div style={{ y }} className=\"relative max-w-lg\">\n        <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Parallax</p>\n        <h3 className=\"mt-2 text-3xl font-medium tracking-[-0.022em] text-fg\">{title}</h3>\n        <p className=\"mt-3 text-sm leading-[1.55] text-fg-muted\">{body}</p>\n      </motion.div>\n    </div>\n  )\n}\nexport { ParallaxPanel }\n"
    }
  ]
}