{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax",
  "title": "Parallax",
  "description": "Parallax block, creates a parallax effect.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/parallax/index.tsx",
      "content": "'use client';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport {\n  motion,\n  HTMLMotionProps,\n  useMotionTemplate,\n  useScroll,\n  useTransform,\n} from 'motion/react';\n\ninterface ParallaxItemProps extends HTMLMotionProps<'div'> {\n  start: number;\n  end: number;\n}\n\nexport function Parallax({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div className={cn('relative min-h-dvh w-full', className)} {...props} />\n  );\n}\n\nexport function PrallaxContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div className={cn('px-default min-h-screen', className)} {...props} />\n  );\n}\nexport function ParallaxItem({\n  start,\n  end,\n  className,\n  style,\n  ...props\n}: ParallaxItemProps) {\n  const ref = React.useRef(null);\n\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [`${start}px end`, `end ${end * -1}px`],\n  });\n\n  const opacity = useTransform(scrollYProgress, [0.75, 1], [1, 0]);\n  const scale = useTransform(scrollYProgress, [0.6, 1], [1, 0.7]);\n\n  const y = useTransform(scrollYProgress, [0, 1], [start, end]);\n  const transform = useMotionTemplate`translateY(${y}px) scale(${scale})`;\n\n  return (\n    <motion.div\n      className={className}\n      ref={ref}\n      style={{ transform, opacity, ...style }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/parallax.tsx"
    }
  ],
  "type": "registry:block"
}