CpuSuperposition

Guidelines#

Use it for the #features anchor of the landing page. It takes no props (exported here as CpuSuperposition; the source's default export is PageAvecSuperposition). The grid is loaded client-side only (next/dynamic with ssr: false).

Anatomy: a relative panel, 16px padding, rounded-xl, bg-accent/20, at least 500px tall (650px from sm, 800px from md). The circuit sits in a max-w-5xl centred column at z-10 and pulls the grid up by 20px (30px from sm, 150px from md) so the traces run into the cards; the grid sits above at z-20 with 8px side padding.

Behaviour: the circuit draws in and its light pulses loop; the cards glow toward the pointer (see CpuArchitecture and FeaturesGridWithGlowingEffect). On light themes the circuit's text-muted traces are faint by design; the chip and pulses carry it.

Don't place other content between the circuit and the grid (the overlap is tuned), or use it twice on a page (the circuit's SVG ids are global).

Facts#

Group	Marketing
Product	Crew OS
Global	window.DigitalCrew.CpuSuperposition
Source	digitalcrew-orchestrator: components/sections/cpu-superposition.tsx
Import in the app	import CpuSuperposition from "@/components/sections/cpu-superposition";

API#

TypeScript declarations emitted from components/sections/cpu-superposition.tsx (the module also exports CpuSuperposition).

export default function PageAvecSuperposition(): JSX.Element;

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(DC.CpuSuperposition); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#