{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cpu-architecture",
  "type": "registry:block",
  "title": "Cpu architecture",
  "description": "Cpu architecture",
  "files": [
    {
      "path": "components/usages/cpuarchitectureusage.tsx",
      "content": "\"use client\"\r\n\r\nimport { CpuArchitecture } from \"@/registry/open-source/cpu-architecture\"\r\n\r\n\r\nconst CpuArchitectureDemo = () => {\r\n    return (\r\n        <div className=\"h-full w-full rounded-xl p-4\">\r\n            <CpuArchitecture />\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default CpuArchitectureDemo",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cpuarchitectureusage.tsx",
      "content": "\"use client\"\r\n\r\nimport { CpuArchitecture } from \"@/registry/open-source/cpu-architecture\"\r\n\r\n\r\nconst CpuArchitectureDemo = () => {\r\n    return (\r\n        <div className=\"h-full w-full rounded-xl p-4\">\r\n            <CpuArchitecture />\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default CpuArchitectureDemo",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cpu-architecture.tsx",
      "content": "import React from \"react\"\n\n// Credit: \n// https://www.gammaui.com/docs/components/cpu-architecture\n\n/**\n * ADD TO CSS\n.cpu-architecture {\noffset-anchor: 10px 0px;\nanimation: animation-path;\nanimation-iteration-count: infinite;\nanimation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);\n}\n\n.cpu-line-1 {\noffset-path: path(\"M 10 20 h 79.5 q 5 0 5 5 v 30\");\nanimation-duration: 5s;\nanimation-delay: 1s;\n}\n\n.cpu-line-2 {\noffset-path: path(\"M 180 10 h -69.7 q -5 0 -5 5 v 40\");\nanimation-delay: 6s;\nanimation-duration: 2s;\n}\n\n.cpu-line-3 {\noffset-path: path(\"M 130 20 v 21.8 q 0 5 -5 5 h -25\");\nanimation-delay: 4s;\nanimation-duration: 6s;\n}\n\n.cpu-line-4 {\noffset-path: path(\"M 170 80 v -21.8 q 0 -5 -5 -5 h -65\");\nanimation-delay: 3s;\nanimation-duration: 3s;\n}\n\n.cpu-line-5 {\noffset-path: path(\n\"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 -35\"\n);\nanimation-delay: 9s;\nanimation-duration: 4s;\n}\n\n.cpu-line-6 {\noffset-path: path(\"M 94.8 95 v -46\");\nanimation-delay: 3s;\nanimation-duration: 7s;\n}\n\n.cpu-line-7 {\noffset-path: path(\n\"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 28\"\n);\nanimation-delay: 4s;\nanimation-duration: 4s;\n}\n\n.cpu-line-8 {\noffset-path: path(\"M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35\");\nanimation-delay: 3s;\nanimation-duration: 3s;\n}\n\n@keyframes animation-path {\n0% {\noffset-distance: 0%;\n}\n100% {\noffset-distance: 100%;\n}\n}\n\n\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 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"
    }
  ]
}