{
  "name": "spinning-text",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "spinning-text.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { motion, Transition, Variants } from 'motion/react';\nimport React, { CSSProperties } from 'react';\n\nexport type SpinningTextProps = {\n  children: string;\n  style?: CSSProperties;\n  duration?: number;\n  className?: string;\n  reverse?: boolean;\n  fontSize?: number;\n  radius?: number;\n  transition?: Transition;\n  variants?: {\n    container?: Variants;\n    item?: Variants;\n  };\n};\n\nconst BASE_TRANSITION = {\n  repeat: Infinity,\n  ease: 'linear',\n};\n\nconst BASE_ITEM_VARIANTS = {\n  hidden: {\n    opacity: 1,\n  },\n  visible: {\n    opacity: 1,\n  },\n};\n\nexport function SpinningText({\n  children,\n  duration = 10,\n  style,\n  className,\n  reverse = false,\n  fontSize = 1,\n  radius = 5,\n  transition,\n  variants,\n}: SpinningTextProps) {\n  const letters = children.split('');\n  const totalLetters = letters.length;\n\n  const finalTransition = {\n    ...BASE_TRANSITION,\n    ...transition,\n    duration: (transition as { duration?: number })?.duration ?? duration,\n  };\n\n  const containerVariants = {\n    visible: { rotate: reverse ? -360 : 360 },\n    ...variants?.container,\n  };\n\n  const itemVariants = {\n    ...BASE_ITEM_VARIANTS,\n    ...variants?.item,\n  };\n\n  return (\n    <motion.div\n      className={cn('relative', className)}\n      style={{\n        ...style,\n      }}\n      initial='hidden'\n      animate='visible'\n      variants={containerVariants}\n      transition={finalTransition}\n    >\n      {letters.map((letter, index) => (\n        <motion.span\n          aria-hidden='true'\n          key={`${index}-${letter}`}\n          variants={itemVariants}\n          className='absolute left-1/2 top-1/2 inline-block'\n          style={\n            {\n              '--index': index,\n              '--total': totalLetters,\n              '--font-size': fontSize,\n              '--radius': radius,\n              fontSize: `calc(var(--font-size, 2) * 1rem)`,\n              transform: `\n                  translate(-50%, -50%)\n                  rotate(calc(360deg / var(--total) * var(--index)))\n                  translateY(calc(var(--radius, 5) * -1ch))\n                `,\n              transformOrigin: 'center',\n            } as React.CSSProperties\n          }\n        >\n          {letter}\n        </motion.span>\n      ))}\n      <span className='sr-only'>{children}</span>\n    </motion.div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}