Conduction background, Conduction Design System

Default · on cobalt.

White hexes drift on a cobalt surface. Smaller hexes sit deeper, breathe gentler.

On-light · on white.

Cobalt hexes on white. Soft, never competes with the foreground.

React / MDX usage

Wired through `<CtaBanner/>`

The conduction-bg honeycomb is wired into the React <CtaBanner/> swizzle so any site using the preset gets the parallax hex layer behind every cobalt CTA panel for free. The runtime hydrator is loaded as a static asset and exposes window.ConductionBg.hydrate() for SPA-friendly re-mounts.

Loading the runtime (per-page Head)

import Head from '@docusaurus/Head';

<Head>
  <link rel="stylesheet" href="/lib/conduction-bg.css" />
  <script src="/lib/conduction-bg.js" defer />
</Head>

Mounting an instance

{/* Inside any position:relative + overflow:hidden container */}
<div className="conduction-bg" aria-hidden="true" />

Modifiers

(default) white hexes for cobalt surfaces
.on-light cobalt hexes for white / cobalt-50 surfaces
data-count override hex count (default 18)

Coming next: a real <ConductionBg/> React component so callers don't have to remember the Head boilerplate.