{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-repeat",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/scroll-animation/repeat-scroll.tsx",
      "content": "'use client';\nimport { ScrollAnimation } from '@/components/ui/scroll-animation';\nimport React from 'react';\n\nfunction RepeatScroll() {\n  return (\n    <section>\n      <div className='h-[500px] grid place-content-center'>\n        <h1 className='text-6xl font-semibold text-center py-8'>Scroll Down 👇 </h1>\n      </div>\n      <div className='py-2'>\n        <div className=' columns-3'>\n          <ScrollAnimation direction='left' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1724690416947-3cdc197ffab1?q=80&w=600&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='left' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1695763594594-31505b18b58a?q=80&w=2072&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='left' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1724888861686-ad3f706ab067?q=80&w=1974&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n\n          <ScrollAnimation viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=1974&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1478028928718-7bfdb1b32095?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='right' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='right' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1478028928718-7bfdb1b32095?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='right' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n          <ScrollAnimation direction='right' viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}>\n            <img\n              src='https://images.unsplash.com/photo-1478028928718-7bfdb1b32095?q=80&w=2070&auto=format&fit=crop'\n              alt=''\n              className='w-full mb-2'\n            />\n          </ScrollAnimation>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default RepeatScroll;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/scroll-animation.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { HTMLMotionProps, motion } from 'motion/react';\nimport type React from 'react';\n\ntype Direction = 'up' | 'down' | 'left' | 'right';\ntype AsTag =\n  | 'div'\n  | 'span'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'a'\n  | 'p'\n  | 'section'\n  | 'figure'\n  | 'button'\n  | 'article';\n\nconst generateVariants = (direction: Direction) => {\n  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';\n  const value = direction === 'right' || direction === 'down' ? 20 : -20;\n\n  return {\n    hidden: { filter: 'blur(10px)', opacity: 0, [axis]: value },\n    visible: {\n      filter: 'blur(0px)',\n      opacity: 1,\n      [axis]: 0,\n      transition: {\n        duration: 0.7,\n        ease: 'easeOut',\n      },\n    },\n  };\n};\n\nconst defaultViewport = {\n  once: true,\n  amount: 0.3,\n  margin: '0px 0px -200px 0px',\n};\n\ninterface ScrollElementProps {\n  children: React.ReactNode;\n  className?: string;\n  variants?: {\n    hidden?: any;\n    visible?: any;\n  };\n  viewport?: {\n    amount?: number;\n    margin?: string;\n    once?: boolean;\n  };\n  delay?: number;\n  direction?: Direction;\n  as?: AsTag;\n  [key: string]: any; // Allow any additional props\n}\n\nexport function ScrollAnimation({\n  children,\n  className,\n  variants,\n  viewport = defaultViewport,\n  delay = 0,\n  direction = 'down',\n  as: Component = 'div',\n  ...props\n}: ScrollElementProps) {\n  const baseVariants = variants || generateVariants(direction);\n  const modifiedVariants = {\n    hidden: baseVariants.hidden,\n    visible: {\n      ...baseVariants.visible,\n      transition: {\n        ...baseVariants.visible.transition,\n        delay,\n      },\n    },\n  };\n\n  const MotionComponent = motion[Component] as typeof motion.div;\n\n  return (\n    <MotionComponent\n      whileInView='visible'\n      initial='hidden'\n      variants={modifiedVariants}\n      viewport={viewport as any}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}