{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "framerhorizontalscroll",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/scroll-animation/framer-horizontal-scroll.tsx",
      "content": "'use client';\nimport {\n  type MotionProps,\n  motion,\n  useMotionValueEvent,\n  useScroll,\n  useTransform,\n} from 'motion/react';\n\n// * based on: https://gist.github.com/coleturner/34396fb826c12fbd88d6591173d178c2\nimport { useEffect, useRef, useState } from 'react';\n\nexport function throttle(fn: (...args: any[]) => any, wait: number) {\n  let shouldWait = false;\n\n  return function throttledFunction(this: any, ...args: any[]) {\n    if (!shouldWait) {\n      fn.apply(this, args);\n      shouldWait = true;\n      setTimeout(() => (shouldWait = false), wait);\n    }\n  };\n}\nexport const items = [\n  {\n    id: 1,\n    url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n  },\n  {\n    id: 2,\n    url: 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format',\n  },\n  {\n    id: 3,\n    url: 'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format',\n  },\n  {\n    id: 4,\n    url: 'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format',\n  },\n  {\n    id: 5,\n    url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n  },\n\n  {\n    id: 7,\n    url: 'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format',\n  },\n  {\n    id: 8,\n    url: 'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format',\n  },\n\n  {\n    id: 91,\n    url: 'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format',\n  },\n  {\n    id: 92,\n    url: 'https://images.unsplash.com/photo-1462989856370-729a9c1e2c91?q=80&w=1200&auto=format',\n  },\n  {\n    id: 10,\n    url: 'https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?q=80&w=1200&auto=format',\n  },\n  {\n    id: 11,\n    url: 'https://images.unsplash.com/photo-1546942113-a6c43b63104a?q=80&w=1200&auto=format',\n  },\n  {\n    id: 12,\n    url: 'https://images.unsplash.com/photo-1726551195764-f98a8e8a57c3?q=80&w=1200&auto=format',\n  },\n  {\n    id: 13,\n    url: 'https://images.unsplash.com/photo-1726551195795-612ca47c0b7d?q=80&w=1200&auto=format',\n  },\n  {\n    id: 14,\n    url: 'https://images.unsplash.com/photo-1532423622396-10a3f979251a?q=80&w=1200&auto=format',\n  },\n  {\n    id: 15,\n    url: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1200&auto=format',\n  },\n  {\n    id: 16,\n    url: 'https://images.unsplash.com/photo-1496861083958-175bb1bd5702?q=80&w=1200&auto=format',\n  },\n];\n\n// * based on: https://gist.github.com/coleturner/34396fb826c12fbd88d6591173d178c2\nfunction useElementViewportPosition(ref: React.RefObject<HTMLElement | null>) {\n  const [position, setPosition] = useState<[number, number]>([0, 0]);\n\n  useEffect(() => {\n    if (!ref || !ref.current) return;\n\n    const pageHeight = document.body.scrollHeight;\n    const start = ref.current.offsetTop;\n    const end = start + ref.current.offsetHeight;\n\n    setPosition([start / pageHeight, end / pageHeight]);\n  }, []);\n\n  return { position };\n}\n\nconst slideAnimation: MotionProps = {\n  variants: {\n    full: { backgroundColor: '#008299' },\n    partial: { backgroundColor: '#ffffff' },\n  },\n  initial: 'partial',\n  whileInView: 'full',\n  viewport: { amount: 1, once: false },\n};\n\nexport default function FramerHorizontalScroll() {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const carouselRef = useRef<HTMLDivElement>(null);\n  const { position } = useElementViewportPosition(mainRef);\n  //   const { ref, start, end } = useRefScrollProgress(mainRef)\n  const [carouselEndPosition, setCarouselEndPosition] = useState(0);\n  const { scrollYProgress, scrollY } = useScroll();\n  const x = useTransform(scrollYProgress, position, [0, carouselEndPosition]);\n\n  console.log(carouselEndPosition);\n  useMotionValueEvent(scrollY, 'change', (latest) => {\n    console.log('Page scroll: ', latest);\n  });\n  useEffect(() => {\n    window.addEventListener('scroll', () => console.log(carouselEndPosition));\n  }, []);\n\n  useEffect(() => {\n    if (!carouselRef || !carouselRef.current) return;\n    const parent = carouselRef.current.parentElement;\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n    const resetCarouselEndPosition = () => {\n      if (carouselRef && carouselRef.current) {\n        const newPosition =\n          carouselRef.current.clientWidth -\n          window.innerWidth +\n          scrollbarWidth +\n          (parent as HTMLElement).offsetLeft * 2;\n\n        setCarouselEndPosition(-newPosition);\n      }\n    };\n\n    resetCarouselEndPosition();\n    const handleResize = throttle(resetCarouselEndPosition, 10);\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return (\n    <>\n      <section ref={mainRef}>\n        <div className='w-full mx-auto' style={{ height: '300vh' }}>\n          <div className='sticky top-0 h-screen w-full flex flex-col items-start justify-center overflow-hidden'>\n            <motion.div ref={carouselRef} className='flex gap-10' style={{ x }}>\n              {items.map((item, index) => (\n                <motion.div\n                  {...slideAnimation}\n                  key={item.id}\n                  className='group relative h-[300px] w-[300px] overflow-hidden bg-neutral-200'\n                >\n                  <motion.img\n                    key={item.id}\n                    className='w-full shrink-0 h-full object-cover'\n                    src={item?.url}\n                    alt={'img'}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </div>\n        </div>\n      </section>\n      <footer className='group '>\n        <h1 className='text-[16vw] group-hover:translate-y-4 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        <section className='bg-black h-40 relative z-10 grid place-content-center text-2xl rounded-tr-full rounded-tl-full'>\n          Thanks for Scrolling\n        </section>\n      </footer>\n    </>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}