{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-hero-scroll",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/scroll-animation/sticky-hero-scroll.tsx",
      "content": "// @ts-nocheck\n'use client';\n\nimport { motion, useScroll, useTransform } from 'motion/react';\nimport { useEffect, useRef } from 'react';\n\nexport default function StickyHeroScroll() {\n  const container = useRef(undefined);\n  const { scrollYProgress } = useScroll({\n    target: container,\n    offset: ['start start', 'end end'],\n  });\n\n  return (\n    <>\n      <main ref={container} className='relative h-[200vh] bg-black  '>\n        <Section1 scrollYProgress={scrollYProgress} />\n        <Section2 scrollYProgress={scrollYProgress} />\n        <footer className='group bg-[#06060e] '>\n          <h1 className='text-[16vw] translate-y-20 leading-[100%] uppercase font-semibold text-center bg-linear-to-r from-neutral-400 to-neutral-800 bg-clip-text text-transparent transition-all ease-linear'>\n            ui-layout\n          </h1>\n          <div className='bg-black text-white h-40 relative z-10 grid place-content-center text-2xl rounded-tr-full rounded-tl-full'></div>\n        </footer>\n      </main>\n    </>\n  );\n}\n\nconst Section1 = ({ scrollYProgress }) => {\n  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]);\n  const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]);\n  return (\n    <motion.section\n      style={{ scale, rotate }}\n      className='sticky  font-semibold top-0 h-screen bg-linear-to-t to-[#dadada] from-[#ebebeb] flex flex-col items-center justify-center text-black'\n    >\n      <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[54px_54px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>\n\n      <h1 className='2xl:text-7xl text-6xl px-8 font-semibold text-center tracking-tight leading-[120%]'>\n        An Hero section Animation <br /> Scroll Please 👇\n      </h1>\n    </motion.section>\n  );\n};\n\nconst Section2 = ({ scrollYProgress }) => {\n  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);\n  const rotate = useTransform(scrollYProgress, [0, 1], [5, 0]);\n\n  return (\n    <motion.section\n      style={{ scale, rotate }}\n      className='relative h-screen bg-linear-to-t to-[#1a1919] from-[#06060e] text-white '\n    >\n      <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[54px_54px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>\n      <article className='container mx-auto relative z-10 '>\n        <h1 className='text-6xl leading-[100%] py-10 font-semibold  tracking-tight '>\n          Images That doesn't Make any sense <br /> but still in this section\n        </h1>\n        <div className='grid grid-cols-4 gap-4'>\n          <img\n            src='https://images.unsplash.com/photo-1717893777838-4e222311630b?w=1200&auto=format&fit=crop'\n            alt='img'\n            className=' object-cover w-full rounded-md h-full'\n          />\n          <img\n            src='https://images.unsplash.com/photo-1717618389115-88db6d7d8f77?w=500&auto=format&fit=crop'\n            alt='img'\n            className=' object-cover w-full rounded-md'\n          />\n          <img\n            src='https://images.unsplash.com/photo-1717588604557-55b2888f59a6?w=500&auto=format&fit=crop'\n            alt='img'\n            className=' object-cover w-full rounded-md h-full'\n          />\n          <img\n            src='https://images.unsplash.com/photo-1713417338603-1b6b72fcade2?w=500&auto=format&fit=crop'\n            alt='img'\n            className=' object-cover w-full rounded-md h-full'\n          />\n        </div>\n      </article>\n    </motion.section>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}