{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-autoplay",
  "title": "Scroll Autoplay",
  "description": "Displaying different content depending on order and scroll position.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/scroll-animations/scroll-autoplay/index.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport {\n  motion,\n  HTMLMotionProps,\n  MotionValue,\n  MapInputRange,\n  useScroll,\n  useTransform,\n  UseScrollOptions,\n} from 'motion/react';\nimport React from 'react';\n\ninterface ScrollAutoplayProps extends HTMLMotionProps<'div'> {\n  offset?: UseScrollOptions['offset'];\n}\ninterface ScrollAutoPlayItemProps extends HTMLMotionProps<'div'> {\n  index: number;\n  totalImages: number;\n  opacityRange?: unknown[];\n}\ninterface ScrollAutoplayContextValue {\n  scrollYProgress: MotionValue<number>;\n}\nconst ScrollAutoplayContext = React.createContext<\n  ScrollAutoplayContextValue | undefined\n>(undefined);\nfunction useScrollAutoplayContext() {\n  const context = React.useContext(ScrollAutoplayContext);\n  if (context === undefined) {\n    throw new Error(\n      'useScrollAutoplayContext must be used within a ScrollAutoplayContextProvider',\n    );\n  }\n  return context;\n}\n\nexport function ScrollAutoplay({\n  offset = ['0% 50%', '100% 50%'],\n  className,\n  ...props\n}: ScrollAutoplayProps) {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: scrollRef,\n    offset: offset,\n  });\n\n  return (\n    <ScrollAutoplayContext.Provider value={{ scrollYProgress }}>\n      <motion.div\n        ref={scrollRef}\n        className={cn('relative min-h-screen', className)}\n        {...props}\n      />\n    </ScrollAutoplayContext.Provider>\n  );\n}\n\nexport function ScrollAutoplayContainer({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('sticky top-0 left-0 w-full min-h-fit', className)}\n      {...props}\n    />\n  );\n}\n\nexport function ScrollAutoplayItem({\n  index,\n  totalImages,\n  opacityRange = [0, 1],\n  className,\n  style,\n  ...props\n}: ScrollAutoPlayItemProps) {\n  const { scrollYProgress } = useScrollAutoplayContext();\n  const start = index / (totalImages + 1);\n  const end = (index + 1) / (totalImages + 1);\n  const range = [start, end];\n\n  const opacity = useTransform(scrollYProgress, range, opacityRange);\n\n  return (\n    <motion.div\n      className={cn('absolute inset-0 size-full', className)}\n      style={{\n        opacity,\n        willChange: 'opacity',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-autoplay.tsx"
    }
  ],
  "type": "registry:block"
}