# CpuArchitecture

> An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **Global**: `window.DigitalCrew.CpuArchitecture`
- **Source**: `digitalcrew-orchestrator: components/ui/cpu-architecture.tsx`
- **Import in the app**: `import { CpuArchitecture } from "@/components/ui/cpu-architecture";`
- **Live preview**: /design/components/cpu-architecture/preview.html
- **Page**: /design/components/cpu-architecture

## Guidelines

**Use it for** the hero of the Crew OS features section, where it sits above the glowing features grid ([`CpuSuperposition`](/design/components/cpu-superposition.md)). 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-path`s, 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.

## API

```ts
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

```html
<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

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.