{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-animation-text",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/scroll-animation/text-scroll.tsx",
      "content": "'use client';\nimport { ScrollAnimation } from '@/components/ui/scroll-animation';\nimport React from 'react';\n\nfunction TextScroll() {\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>\n          <ScrollAnimation\n            direction='left'\n            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}\n            className='text-6xl text-left py-44 2xl:max-w-xl max-w-lg'\n          >\n            <p>Take a glance over to the left side.</p>\n          </ScrollAnimation>\n\n          <ScrollAnimation\n            direction='right'\n            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}\n            className='text-6xl text-right py-44 2xl:max-w-xl max-w-lg ml-auto'\n          >\n            <p>Now shift your eyes to the right side.</p>\n          </ScrollAnimation>\n\n          <ScrollAnimation\n            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}\n            className='text-6xl max-w-md mx-auto text-center py-44 2xl:max-w-xl'\n          >\n            <p>And finally, don’t miss what’s waiting below.</p>\n          </ScrollAnimation>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default TextScroll;\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"
}