{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-hero-section",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/sticky-hero-section.txt",
      "content": "\r\n// @ts-nocheck\r\n'use client';\r\n\r\nimport { useScroll, useTransform, motion } from 'motion/react';\r\nimport { useEffect, useRef } from 'react';\r\n\r\nexport default function index() {\r\n  const container = useRef();\r\n  const { scrollYProgress } = useScroll({\r\n    target: container,\r\n    offset: ['start start', 'end end'],\r\n  });\r\n\r\n  return (\r\n    <>\r\n      <main ref={container} className='relative h-[200vh] bg-black  '>\r\n        <Section1 scrollYProgress={scrollYProgress} />\r\n        <Section2 scrollYProgress={scrollYProgress} />\r\n        <footer className='group bg-[#06060e] '>\r\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'>\r\n            ui-layout\r\n          </h1>\r\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>\r\n        </footer>\r\n      </main>\r\n    </>\r\n  );\r\n}\r\n\r\nconst Section1 = ({ scrollYProgress }) => {\r\n  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]);\r\n  const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]);\r\n  return (\r\n    <motion.section\r\n      style={{ scale, rotate }}\r\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'\r\n    >\r\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>\r\n\r\n      <h1 className='2xl:text-7xl text-6xl px-8 font-semibold text-center tracking-tight leading-[120%]'>\r\n        An Hero section Animation <br /> Scroll Please 👇\r\n      </h1>\r\n    </motion.section>\r\n  );\r\n};\r\n\r\nconst Section2 = ({ scrollYProgress }) => {\r\n  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);\r\n  const rotate = useTransform(scrollYProgress, [0, 1], [5, 0]);\r\n\r\n  return (\r\n    <motion.section\r\n      style={{ scale, rotate }}\r\n      className='relative h-screen bg-linear-to-t to-[#1a1919] from-[#06060e] text-white '\r\n    >\r\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>\r\n      <article className='container mx-auto relative z-10 '>\r\n        <h1 className='text-6xl leading-[100%] py-10 font-semibold  tracking-tight '>\r\n          Images That doesn't Make any sense <br /> but still in this section\r\n        </h1>\r\n        <div className='grid grid-cols-4 gap-4'>\r\n          <img\r\n            src='https://images.unsplash.com/photo-1717893777838-4e222311630b?w=1200&auto=format&fit=crop'\r\n            alt='img'\r\n            className=' object-cover w-full rounded-md h-full'\r\n          />\r\n          <img\r\n            src='https://images.unsplash.com/photo-1717618389115-88db6d7d8f77?w=500&auto=format&fit=crop'\r\n            alt='img'\r\n            className=' object-cover w-full rounded-md'\r\n          />\r\n          <img\r\n            src='https://images.unsplash.com/photo-1717588604557-55b2888f59a6?w=500&auto=format&fit=crop'\r\n            alt='img'\r\n            className=' object-cover w-full rounded-md h-full'\r\n          />\r\n          <img\r\n            src='https://images.unsplash.com/photo-1713417338603-1b6b72fcade2?w=500&auto=format&fit=crop'\r\n            alt='img'\r\n            className=' object-cover w-full rounded-md h-full'\r\n          />\r\n        </div>\r\n      </article>\r\n    </motion.section>\r\n  );\r\n};",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}