{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "parallax-sections",
  "title": "Parallax Sections",
  "description": "A simple Parallax effect using Motion.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/parallax-sections.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\nimport { MotionValue, motion, useScroll, useTransform } from \"motion/react\";\n\ninterface SectionProps {\n  scrollYProgress: MotionValue;\n}\nexport const ParallaxSections = () => {\n  const container = useRef(null);\n  const { scrollYProgress } = useScroll({\n    target: container,\n    offset: [\"start start\", \"end end\"],\n  });\n\n  return (\n    <div ref={container} className=\"relative h-[200vh] w-full\">\n      {/* Change the height of the container according to number of Sections */}\n      <Section1 scrollYProgress={scrollYProgress} />\n      <Section2 scrollYProgress={scrollYProgress} />\n    </div>\n  );\n};\n\nconst Section1 = ({ scrollYProgress }: SectionProps) => {\n  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]);\n  const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]);\n\n  return (\n    <motion.section\n      style={{ scale, rotate }}\n      className=\"sticky top-0 flex h-screen items-center justify-center bg-neutral-700\"\n    >\n      <h1 className=\"text-5xl font-bold\">This section is Cool.</h1>\n    </motion.section>\n  );\n};\n\nconst Section2 = ({ scrollYProgress }: SectionProps) => {\n  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);\n  const rotate = useTransform(scrollYProgress, [0, 1], [-5, 0]); // You can change the rotation if you want to add more sections below to make it look more cooler ;)\n\n  return (\n    <motion.section\n      style={{ scale, rotate }}\n      className=\"relative flex h-screen items-center justify-center bg-red-500\"\n    >\n      <h1 className=\"text-5xl font-bold\">This is Cooler!</h1>\n    </motion.section>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}