{
  "name": "spinning-text-custom-variants",
  "type": "registry:ui",
  "componentName": "spinning-text",
  "description": "Spinning text with custom animation variants.",
  "files": [
    {
      "path": "spinning-text-custom-variants.tsx",
      "content": "import React from 'react';\nimport { SpinningText } from '@/components/core/spinning-text';\n\nexport function SpinningTextCustomVariants() {\n  return (\n    <SpinningText\n      radius={5.5}\n      fontSize={1}\n      variants={{\n        container: {\n          hidden: {\n            opacity: 1,\n          },\n          visible: {\n            opacity: 1,\n            rotate: 360,\n            transition: {\n              type: 'spring',\n              bounce: 0,\n              duration: 6,\n              repeat: Infinity,\n              staggerChildren: 0.03,\n            },\n          },\n        },\n        item: {\n          hidden: {\n            opacity: 0,\n            filter: 'blur(4px)',\n          },\n          visible: {\n            opacity: 1,\n            filter: 'blur(0px)',\n          },\n        },\n      }}\n      className='font-[450]'\n    >\n      {`pre-order • pre-order • pre-order • `}\n    </SpinningText>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/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: 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: Transition = {\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"
    }
  ]
}