{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cpu-architecture",
  "title": "CPU Architecture",
  "description": "A fully animated CPU architecture SVG component with dynamic paths, gradients, and optional CPU connections.",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "registry/gammaui/cpu-architecture.tsx",
      "content": "import React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface CpuArchitectureSvgProps {\n  className?: string\n  width?: string\n  height?: string\n  text?: string\n  showCpuConnections?: boolean\n  lineMarkerSize?: number\n  animateText?: boolean\n  animateLines?: boolean\n  animateMarkers?: boolean\n}\n\nexport default function CpuArchitecture({\n  className,\n  width = \"100%\",\n  height = \"100%\",\n  text = \"CPU\",\n  showCpuConnections = true,\n  animateText = true,\n  lineMarkerSize = 18,\n  animateLines = true,\n  animateMarkers = true,\n}: CpuArchitectureSvgProps) {\n  return (\n    <svg\n      className={cn(\"text-muted\", className)}\n      width={width}\n      height={height}\n      viewBox=\"0 0 200 100\"\n    >\n      {/* Paths */}\n      <g\n        stroke=\"currentColor\"\n        fill=\"none\"\n        strokeWidth=\"0.3\"\n        strokeDasharray=\"100 100\"\n        pathLength=\"100\"\n        markerStart=\"url(#cpu-circle-marker)\"\n      >\n        {/* 1st */}\n        <path\n          strokeDasharray=\"100 100\"\n          pathLength=\"100\"\n          d=\"M 10 20 h 79.5 q 5 0 5 5 v 30\"\n        />\n        {/* 2nd */}\n        <path\n          strokeDasharray=\"100 100\"\n          pathLength=\"100\"\n          d=\"M 180 10 h -69.7 q -5 0 -5 5 v 30\"\n        />\n        {/* 3rd */}\n        <path d=\"M 130 20 v 21.8 q 0 5 -5 5 h -10\" />\n        {/* 4th */}\n        <path d=\"M 170 80 v -21.8 q 0 -5 -5 -5 h -50\" />\n        {/* 5th */}\n        <path\n          strokeDasharray=\"100 100\"\n          pathLength=\"100\"\n          d=\"M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20\"\n        />\n        {/* 6th */}\n        <path d=\"M 94.8 95 v -36\" />\n        {/* 7th */}\n        <path d=\"M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 14\" />\n        {/* 8th */}\n        <path d=\"M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20\" />\n        {/* Animation For Path Starting */}\n        {animateLines && (\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            from=\"100\"\n            to=\"0\"\n            dur=\"1s\"\n            fill=\"freeze\"\n            calcMode=\"spline\"\n            keySplines=\"0.25,0.1,0.5,1\"\n            keyTimes=\"0; 1\"\n          />\n        )}\n      </g>\n\n      {/* 1. Blue Light */}\n      <g mask=\"url(#cpu-mask-1)\">\n        <circle\n          className=\"cpu-architecture cpu-line-1\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-blue-grad)\"\n        />\n      </g>\n      {/* 2. Yellow Light */}\n      <g mask=\"url(#cpu-mask-2)\">\n        <circle\n          className=\"cpu-architecture cpu-line-2\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-yellow-grad)\"\n        />\n      </g>\n      {/* 3. Pinkish Light */}\n      <g mask=\"url(#cpu-mask-3)\">\n        <circle\n          className=\"cpu-architecture cpu-line-3\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-pinkish-grad)\"\n        />\n      </g>\n      {/* 4. White Light */}\n      <g mask=\"url(#cpu-mask-4)\">\n        <circle\n          className=\"cpu-architecture cpu-line-4\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-white-grad)\"\n        />\n      </g>\n      {/* 5. Green Light */}\n      <g mask=\"url(#cpu-mask-5)\">\n        <circle\n          className=\"cpu-architecture cpu-line-5\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-green-grad)\"\n        />\n      </g>\n      {/* 6. Orange Light */}\n      <g mask=\"url(#cpu-mask-6)\">\n        <circle\n          className=\"cpu-architecture cpu-line-6\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-orange-grad)\"\n        />\n      </g>\n      {/* 7. Cyan Light */}\n      <g mask=\"url(#cpu-mask-7)\">\n        <circle\n          className=\"cpu-architecture cpu-line-7\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-cyan-grad)\"\n        />\n      </g>\n      {/* 8. Rose Light */}\n      <g mask=\"url(#cpu-mask-8)\">\n        <circle\n          className=\"cpu-architecture cpu-line-8\"\n          cx=\"0\"\n          cy=\"0\"\n          r=\"8\"\n          fill=\"url(#cpu-rose-grad)\"\n        />\n      </g>\n      {/* CPU Box */}\n      <g>\n        {/* Cpu connections */}\n        {showCpuConnections && (\n          <g fill=\"url(#cpu-connection-gradient)\">\n            <rect x=\"93\" y=\"37\" width=\"2.5\" height=\"5\" rx=\"0.7\" />\n            <rect x=\"104\" y=\"37\" width=\"2.5\" height=\"5\" rx=\"0.7\" />\n            <rect\n              x=\"116.3\"\n              y=\"44\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(90 116.25 45.5)\"\n            />\n            <rect\n              x=\"122.8\"\n              y=\"44\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(90 116.25 45.5)\"\n            />\n            <rect\n              x=\"104\"\n              y=\"16\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(180 105.25 39.5)\"\n            />\n            <rect\n              x=\"114.5\"\n              y=\"16\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(180 105.25 39.5)\"\n            />\n            <rect\n              x=\"80\"\n              y=\"-13.6\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(270 115.25 19.5)\"\n            />\n            <rect\n              x=\"87\"\n              y=\"-13.6\"\n              width=\"2.5\"\n              height=\"5\"\n              rx=\"0.7\"\n              transform=\"rotate(270 115.25 19.5)\"\n            />\n          </g>\n        )}\n        {/* Main CPU Rectangle */}\n        <rect\n          x=\"85\"\n          y=\"40\"\n          width=\"30\"\n          height=\"20\"\n          rx=\"2\"\n          fill=\"#181818\"\n          filter=\"url(#cpu-light-shadow)\"\n        />\n        {/* CPU Text */}\n        <text\n          x=\"92\"\n          y=\"52.5\"\n          fontSize=\"7\"\n          fill={animateText ? \"url(#cpu-text-gradient)\" : \"white\"}\n          fontWeight=\"600\"\n          letterSpacing=\"0.05em\"\n        >\n          {text}\n        </text>\n      </g>\n      {/* Masks */}\n      <defs>\n        <mask id=\"cpu-mask-1\">\n          <path\n            d=\"M 10 20 h 79.5 q 5 0 5 5 v 24\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-2\">\n          <path\n            d=\"M 180 10 h -69.7 q -5 0 -5 5 v 24\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-3\">\n          <path\n            d=\"M 130 20 v 21.8 q 0 5 -5 5 h -10\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-4\">\n          <path\n            d=\"M 170 80 v -21.8 q 0 -5 -5 -5 h -50\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-5\">\n          <path\n            d=\"M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-6\">\n          <path d=\"M 94.8 95 v -36\" strokeWidth=\"0.5\" stroke=\"white\" />\n        </mask>\n        <mask id=\"cpu-mask-7\">\n          <path\n            d=\"M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 14\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        <mask id=\"cpu-mask-8\">\n          <path\n            d=\"M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20\"\n            strokeWidth=\"0.5\"\n            stroke=\"white\"\n          />\n        </mask>\n        {/* Gradients */}\n        <radialGradient id=\"cpu-blue-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#00E8ED\" />\n          <stop offset=\"50%\" stopColor=\"#08F\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-yellow-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#FFD800\" />\n          <stop offset=\"50%\" stopColor=\"#FFD800\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-pinkish-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#830CD1\" />\n          <stop offset=\"50%\" stopColor=\"#FF008B\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-white-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"white\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-green-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#22c55e\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-orange-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#f97316\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-cyan-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#06b6d4\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <radialGradient id=\"cpu-rose-grad\" fx=\"1\">\n          <stop offset=\"0%\" stopColor=\"#f43f5e\" />\n          <stop offset=\"100%\" stopColor=\"transparent\" />\n        </radialGradient>\n        <filter\n          id=\"cpu-light-shadow\"\n          x=\"-50%\"\n          y=\"-50%\"\n          width=\"200%\"\n          height=\"200%\"\n        >\n          <feDropShadow\n            dx=\"1.5\"\n            dy=\"1.5\"\n            stdDeviation=\"1\"\n            floodColor=\"black\"\n            floodOpacity=\"0.1\"\n          />\n        </filter>\n        <marker\n          id=\"cpu-circle-marker\"\n          viewBox=\"0 0 10 10\"\n          refX=\"5\"\n          refY=\"5\"\n          markerWidth={lineMarkerSize}\n          markerHeight={lineMarkerSize}\n        >\n          <circle\n            id=\"innerMarkerCircle\"\n            cx=\"5\"\n            cy=\"5\"\n            r=\"2\"\n            fill=\"black\"\n            stroke=\"#232323\"\n            strokeWidth=\"0.5\"\n          >\n            {animateMarkers && (\n              <animate attributeName=\"r\" values=\"0; 3; 2\" dur=\"0.5s\" />\n            )}\n          </circle>\n        </marker>\n        {/* Cpu connection gradient */}\n        <linearGradient\n          id=\"cpu-connection-gradient\"\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n        >\n          <stop offset=\"0%\" stopColor=\"#4F4F4F\" />\n          <stop offset=\"60%\" stopColor=\"#121214\" />\n        </linearGradient>\n        {/* Add CPU Text Gradient */}\n        <linearGradient id=\"cpu-text-gradient\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n          <stop offset=\"0%\" stopColor=\"#666666\">\n            <animate\n              attributeName=\"offset\"\n              values=\"-2; -1; 0\"\n              dur=\"5s\"\n              repeatCount=\"indefinite\"\n              calcMode=\"spline\"\n              keyTimes=\"0; 0.5; 1\"\n              keySplines=\"0.4 0 0.2 1; 0.4 0 0.2 1\"\n            />\n          </stop>\n          <stop offset=\"25%\" stopColor=\"white\">\n            <animate\n              attributeName=\"offset\"\n              values=\"-1; 0; 1\"\n              dur=\"5s\"\n              repeatCount=\"indefinite\"\n              calcMode=\"spline\"\n              keyTimes=\"0; 0.5; 1\"\n              keySplines=\"0.4 0 0.2 1; 0.4 0 0.2 1\"\n            />\n          </stop>\n          <stop offset=\"50%\" stopColor=\"#666666\">\n            <animate\n              attributeName=\"offset\"\n              values=\"0; 1; 2;\"\n              dur=\"5s\"\n              repeatCount=\"indefinite\"\n              calcMode=\"spline\"\n              keyTimes=\"0; 0.5; 1\"\n              keySplines=\"0.4 0 0.2 1; 0.4 0 0.2 1\"\n            />\n          </stop>\n        </linearGradient>\n      </defs>\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}