{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-shimmer-motion",
  "type": "registry:component",
  "description": "A text component with shimmer effect.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/text-animation/text-shimmer/TextShimmerMotion.tsx",
      "content": "'use client';\r\nimport { type JSX } from 'react';\r\nimport { motion, Transition } from 'motion/react';\r\nimport { cn } from '@/lib/utils';\r\n\r\n type TextShimmerWaveProps = {\r\n  children: string;\r\n  as?: React.ElementType;\r\n  className?: string;\r\n  duration?: number;\r\n  zDistance?: number;\r\n  xDistance?: number;\r\n  yDistance?: number;\r\n  spread?: number;\r\n  scaleDistance?: number;\r\n  rotateYDistance?: number;\r\n  transition?: Transition;\r\n};\r\n\r\n function TextShimmerWave({\r\n  children,\r\n  as: Component = 'p',\r\n  className,\r\n  duration = 1,\r\n  zDistance = 10,\r\n  xDistance = 2,\r\n  yDistance = -2,\r\n  spread = 1,\r\n  scaleDistance = 1.1,\r\n  rotateYDistance = 10,\r\n  transition,\r\n}: TextShimmerWaveProps) {\r\n  const MotionComponent = motion.create(\r\n    Component as keyof JSX.IntrinsicElements\r\n  );\r\n\r\n  return (\r\n    <MotionComponent\r\n      className={cn(\r\n        'relative inline-block [perspective:500px]',\r\n        '[--base-color:#a1a1aa] [--base-gradient-color:#000]',\r\n        'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff]',\r\n        className\r\n      )}\r\n      style={{ color: 'var(--base-color)' }}\r\n    >\r\n      {children.split('').map((char, i) => {\r\n        const delay = (i * duration * (1 / spread)) / children.length;\r\n\r\n        return (\r\n          <motion.span\r\n            key={i}\r\n            className={cn(\r\n              'inline-block whitespace-pre [transform-style:preserve-3d]'\r\n            )}\r\n            initial={{\r\n              translateZ: 0,\r\n              scale: 1,\r\n              rotateY: 0,\r\n              color: 'var(--base-color)',\r\n            }}\r\n            animate={{\r\n              translateZ: [0, zDistance, 0],\r\n              translateX: [0, xDistance, 0],\r\n              translateY: [0, yDistance, 0],\r\n              scale: [1, scaleDistance, 1],\r\n              rotateY: [0, rotateYDistance, 0],\r\n              color: [\r\n                'var(--base-color)',\r\n                'var(--base-gradient-color)',\r\n                'var(--base-color)',\r\n              ],\r\n            }}\r\n            transition={{\r\n              duration: duration,\r\n              repeat: Infinity,\r\n              repeatDelay: (children.length * 0.05) / spread,\r\n              delay,\r\n              ease: 'easeInOut',\r\n              ...transition,\r\n            }}\r\n          >\r\n            {char}\r\n          </motion.span>\r\n        );\r\n      })}\r\n    </MotionComponent>\r\n  );\r\n}\r\n\r\nexport default function TextShimmerMotion() {\r\n  return (\r\n    <TextShimmerWave\r\n      className='[--base-color:var(--color-primary)] [--base-gradient-color:#5EB1EF]'\r\n      duration={1}\r\n      spread={1}\r\n      zDistance={1}\r\n      scaleDistance={1.1}\r\n      rotateYDistance={20}\r\n    >\r\n      Tailwind Admin generating your table...\r\n    </TextShimmerWave>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/text-animation/text-shimmer/TextShimmerMotion.tsx"
    }
  ]
}