{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-text",
  "dependencies": [
    "motion",
    "@motionone/utils"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/scroll-text.tsx",
      "content": "// @ts-nocheck\n\n'use client';\n\nimport { cn } from '@/lib/utils';\nimport { type HTMLMotionProps, motion } from 'motion/react';\nimport type React from 'react';\nimport type { JSX } from 'react';\n\ntype Direction = 'up' | 'down' | 'left' | 'right';\n\nconst containerVariants = {\n  hidden: {},\n  visible: {\n    transition: {\n      staggerChildren: 0.1,\n    },\n  },\n};\n\nconst generateVariants = (direction: Direction): { hidden: any; visible: any } => {\n  const axis = direction === 'left' || direction === 'right' ? 'X' : 'Y';\n  const value = direction === 'right' || direction === 'down' ? 100 : -100;\n\n  return {\n    hidden: {\n      filter: 'blur(10px)',\n      opacity: 0,\n      [`translate${axis}`]: value,\n    },\n    visible: {\n      filter: 'blur(0px)',\n      opacity: 1,\n      [`translate${axis}`]: 0,\n      transition: {\n        duration: 0.4,\n        ease: 'easeOut',\n      },\n    },\n  };\n};\n\nconst defaultViewport = { amount: 0.3, margin: '0px 0px 0px 0px' };\n\nconst TextAnimation = ({\n  as = 'h1',\n  text,\n  classname = '',\n  viewport = defaultViewport,\n  variants,\n  direction = 'down',\n  letterAnime = false,\n  lineAnime = false,\n}: {\n  text: string;\n  classname?: string;\n  as?: keyof JSX.IntrinsicElements;\n  viewport?: {\n    amount?: number;\n    margin?: string;\n    once?: boolean;\n  };\n  variants?: {\n    hidden?: any;\n    visible?: any;\n  };\n  direction?: Direction;\n  letterAnime?: boolean;\n  lineAnime?: boolean;\n}) => {\n  const baseVariants = variants || generateVariants(direction);\n  const modifiedVariants = {\n    hidden: baseVariants.hidden,\n    visible: {\n      ...baseVariants.visible,\n    },\n  };\n\n  const MotionComponent = motion[as as keyof typeof motion] as React.ComponentType<\n    HTMLMotionProps<any>\n  >;\n\n  return (\n    <MotionComponent\n      whileInView='visible'\n      initial='hidden'\n      variants={containerVariants}\n      viewport={viewport}\n      className={cn(`inline-block dark:text-white text-black uppercase`, classname)}\n    >\n      {lineAnime ? (\n        <motion.span className={`inline-block`} variants={modifiedVariants}>\n          {text}\n        </motion.span>\n      ) : (\n        <>\n          {text.split(' ').map((word: string, index: number) => (\n            <motion.span\n              key={`${word}-${index}`}\n              className={`inline-block`}\n              variants={letterAnime === false ? modifiedVariants : {}}\n            >\n              {letterAnime ? (\n                <>\n                  {word.split('').map((letter: string, letterIndex: number) => (\n                    <motion.span\n                      key={letterIndex}\n                      className={`inline-block`}\n                      variants={modifiedVariants}\n                    >\n                      {letter}\n                    </motion.span>\n                  ))}\n                  &nbsp;\n                </>\n              ) : (\n                <>{word}&nbsp;</>\n              )}\n            </motion.span>\n          ))}\n        </>\n      )}\n    </MotionComponent>\n  );\n};\n\nexport default TextAnimation;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}