{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "brand-twitch-icon",
  "dependencies": ["motion"],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "icons/brand-twitch-icon.tsx",
      "content": "import { forwardRef, useImperativeHandle, useCallback, useRef } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst BrandTwitchIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n    const isAnimatingRef = useRef(false);\n\n    const start = useCallback(async () => {\n      if (isAnimatingRef.current) return;\n      isAnimatingRef.current = true;\n\n      // 1. Color Shift to Twitch Purple\n      animate(\n        scope.current,\n        { color: \"#9146FF\", stroke: \"#9146FF\" },\n        { duration: 0.3 },\n      );\n\n      while (isAnimatingRef.current) {\n        // 2. The Blink (Random intervals)\n        await animate(\n          \".twitch-eyes\",\n          { scaleY: [1, 0, 1] },\n          { duration: 0.1, ease: \"easeInOut\" },\n        );\n\n        if (!isAnimatingRef.current) break;\n\n        // 3. The Glitch (Rare sharp shift)\n        if (Math.random() > 0.6) {\n          await animate(\n            \".twitch-path\",\n            { x: [0, -1, 1, 0], y: [0, 0.5, -0.5, 0] },\n            { duration: 0.15, ease: \"linear\" },\n          );\n        }\n\n        await new Promise((resolve) =>\n          setTimeout(resolve, 800 + Math.random() * 2000),\n        );\n      }\n    }, [animate, scope]);\n\n    const stop = useCallback(() => {\n      isAnimatingRef.current = false;\n      animate(scope.current, { color, stroke: color }, { duration: 0.3 });\n      animate(\".twitch-eyes\", { scaleY: 1 }, { duration: 0.3 });\n      animate(\".twitch-path\", { x: 0, y: 0 }, { duration: 0.3 });\n    }, [animate, color, scope]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={start}\n        onHoverEnd={stop}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        style={{ overflow: \"visible\" }}\n      >\n        <motion.path\n          className=\"twitch-path\"\n          d=\"M21 2H3v16h5v4l4-4h5l4-4V2z\"\n          style={{ transformOrigin: \"center\" }}\n        />\n        <motion.g\n          className=\"twitch-eyes\"\n          style={{ transformOrigin: \"center 9px\" }}\n        >\n          <path d=\"M11 11V7\" />\n          <path d=\"M16 11V7\" />\n        </motion.g>\n      </motion.svg>\n    );\n  },\n);\n\nBrandTwitchIcon.displayName = \"BrandTwitchIcon\";\nexport default BrandTwitchIcon;\n",
      "type": "registry:ui"
    },
    {
      "path": "icons/types.ts",
      "content": "import type { SVGProps } from \"react\";\n\n/** Standard stroke width for 24×24 outline icons */\nexport const DEFAULT_STROKE_WIDTH = 2;\n\n/** Scale stroke to match DEFAULT_STROKE_WIDTH on non-24 viewBoxes */\nexport function scaledStrokeWidth(\n  strokeWidth: number,\n  viewBoxSize: number,\n): number {\n  return strokeWidth * (viewBoxSize / 24);\n}\n\nexport type IconEasing =\n  | \"linear\"\n  | \"easeIn\"\n  | \"easeOut\"\n  | \"easeInOut\"\n  | \"circIn\"\n  | \"circOut\"\n  | \"circInOut\"\n  | \"backIn\"\n  | \"backOut\"\n  | \"backInOut\"\n  | \"anticipate\";\n\nexport interface AnimatedIconProps extends Omit<\n  SVGProps<SVGSVGElement>,\n  | \"ref\"\n  | \"onAnimationStart\"\n  | \"onAnimationEnd\"\n  | \"onAnimationIteration\"\n  | \"onDrag\"\n  | \"onDragEnd\"\n  | \"onDragEnter\"\n  | \"onDragExit\"\n  | \"onDragLeave\"\n  | \"onDragOver\"\n  | \"onDragStart\"\n  | \"onDrop\"\n  | \"values\"\n> {\n  /** Icon size in pixels or CSS string */\n  size?: number | string;\n  /** Icon color (defaults to currentColor) */\n  color?: string;\n  /** SVG stroke width */\n  strokeWidth?: number;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport interface AnimatedIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}