{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinning-text",
  "title": "Spinning Text",
  "description": "Text laid out in a circle that rotates continuously.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/spinning-text/spinning-text.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link SpinningText}. */\nexport type SpinningTextProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Text laid out around the ring. */\n  children: string;\n  /** Seconds for one full revolution. Defaults to `20`. */\n  duration?: number;\n  /** Radius of the text ring in pixels. Defaults to `80`. */\n  radius?: number;\n  /** Spin counter-clockwise when true. Defaults to `false`. */\n  reverse?: boolean;\n};\n\nfunction splitCharacters(value: string): string[] {\n  return value.match(/[\\s\\S]/gu) ?? [];\n}\n\nfunction characterStyle(\n  index: number,\n  total: number,\n  radius: number,\n): React.CSSProperties {\n  return {\n    left: \"50%\",\n    position: \"absolute\",\n    top: \"50%\",\n    transform: `rotate(${(360 / total) * index}deg) translateY(${-radius}px)`,\n    transformOrigin: \"0 0\",\n  };\n}\n\n/**\n * Lays a string evenly around a circle and rotates the ring on a loop.\n *\n * Respects `prefers-reduced-motion`: the layout holds but the spin stops.\n *\n * @example\n * ```tsx\n * <SpinningText>vllnt design system</SpinningText>\n * ```\n */\nexport const SpinningText = ({\n  children,\n  className,\n  duration = 20,\n  radius = 80,\n  ref,\n  reverse = false,\n  style,\n  ...props\n}: SpinningTextProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const characters = splitCharacters(children);\n\n  return (\n    <div\n      aria-label={children}\n      className={cn(\n        \"relative animate-spin motion-reduce:animate-none\",\n        className,\n      )}\n      ref={ref}\n      style={{\n        animationDirection: reverse ? \"reverse\" : \"normal\",\n        animationDuration: `${duration}s`,\n        height: radius * 2,\n        width: radius * 2,\n        ...style,\n      }}\n      {...props}\n    >\n      {characters.map((character, index) => (\n        <span\n          aria-hidden=\"true\"\n          key={`${character}-${index.toString()}`}\n          style={characterStyle(index, characters.length, radius)}\n        >\n          {character}\n        </span>\n      ))}\n    </div>\n  );\n};\nSpinningText.displayName = \"SpinningText\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}