CpuArchitecture

Guidelines#

Use it for the hero of the Crew OS features section, where it sits above the glowing features grid (CpuSuperposition). It is decoration: give it no interactive role.

What you provide: className (the traces take currentColor, text-muted by default), width/height (default 100%), text (default DIGITAL CREW), showCpuConnections (the chip's pins, default true), lineMarkerSize (default 18), animateText, animateLines, animateMarkers (all default true).

Anatomy: viewBox="0 0 200 100", 0.3-unit strokes. The chip is a #181818 rounded rectangle with a soft shadow and 7-unit, weight-600 text; pins use a #4F4F4F→#121214 gradient. Pulses are radial gradients: blue (#00E8ED→#08F), yellow #FFD800, pink (#830CD1→#FF008B), white, green #22c55e, orange #f97316, cyan #06b6d4, rose #f43f5e. On light surfaces the default text-muted traces are very faint; Crew OS places it on bg-accent/20.

Behaviour: traces draw in once (stroke-dashoffset 100→0 over 1s) and end markers pop (radius 0→3→2 over 0.5s). Pulses loop along CSS offset-paths, each 2–7s long with 1–9s start delays, on cubic-bezier(0.75, -0.01, 0, 0.99). The text gradient sweeps grey to white over 5s. None of this checks reduced motion; set the animate* props to false when the user asks for less motion.

Don't render two on one page (their gradient and mask ids are global), or put copy other than the product name in the chip.

Facts#

Group	Effects
Product	Crew OS
Global	window.DigitalCrew.CpuArchitecture
Source	digitalcrew-orchestrator: components/ui/cpu-architecture.tsx
Import in the app	import { CpuArchitecture } from "@/components/ui/cpu-architecture";

API#

TypeScript declarations emitted from components/ui/cpu-architecture.tsx.

export interface CpuArchitectureSvgProps {
    className?: string;
    width?: string;
    height?: string;
    text?: string;
    showCpuConnections?: boolean;
    lineMarkerSize?: number;
    animateText?: boolean;
    animateLines?: boolean;
    animateMarkers?: boolean;
}
declare const CpuArchitecture: ({ className, width, height, text, showCpuConnections, animateText, lineMarkerSize, animateLines, animateMarkers, }: CpuArchitectureSvgProps) => any;
export { CpuArchitecture };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "rounded-xl bg-accent/20 p-4" },
      h("div", { className: "mx-auto max-w-xl" }, h(DC.CpuArchitecture, null)));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Effects#