{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax-section",
  "type": "registry:ui",
  "title": "Parallax Section",
  "description": "Scroll-driven parallax where children move at a different rate than the page, adding depth.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/parallax-section.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Section wrapper that applies scroll-based parallax to children.\n * @author Saasflare™\n * Children move at a different rate than the page scroll, creating depth.\n * @module packages/ui/components/ui/parallax-section\n * @package ui\n *\n * @component\n * @example\n * import { ParallaxSection } from '@saasflare/ui';\n * <ParallaxSection speed={0.5}>\n *   <img src=\"/background.jpg\" alt=\"Background\" className=\"w-full\" />\n * </ParallaxSection>\n */\n\nimport { useRef, type ReactNode } from \"react\"\nimport { m, useScroll, useTransform } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springGentle } from \"@saasflare/ui\"\n\n/** Props for the ParallaxSection component. */\nexport interface ParallaxSectionProps extends SaasflareComponentProps {\n  /** Content to apply parallax to. */\n  children: ReactNode\n  /** Parallax speed factor. 0 = fixed, 0.5 = half speed, 1 = no parallax. Default: `0.5` */\n  speed?: number\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Section wrapper that applies scroll-based parallax to its children.\n *\n * - Children translate vertically based on scroll position and speed factor\n * - Falls back to static rendering when motion is disabled (reduced-motion or `animated={false}`)\n * - Overflow hidden to prevent content leaking during parallax\n *\n * @component\n * @package ui\n */\nexport function ParallaxSection({\n  children,\n  speed = 0.5,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: ParallaxSectionProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springGentle)\n  const ref = useRef<HTMLDivElement>(null)\n\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start end\", \"end start\"],\n  })\n\n  const offset = (1 - speed) * 100\n  // Hook order stays stable; when motion is disabled the transform resolves to a\n  // static identity (no vertical travel) so the parallax honors the `animated` axis.\n  const y = useTransform(scrollYProgress, [0, 1], [`-${offset}px`, `${offset}px`])\n\n  if (motion.disabled) {\n    return (\n      <div\n        className={className}\n        data-slot=\"parallax-section\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"relative overflow-hidden\", className)}\n      data-slot=\"parallax-section\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      <m.div style={{ y }}>\n        {children}\n      </m.div>\n    </div>\n  )\n}\n",
      "target": "components/ui/parallax-section.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/parallax-section.json"
  }
}