nuxt-x-marketing

CircuitBg

Archived — full-bleed circuit-trace SVG pattern overlay with parallax, two configurable colors, node circles, and built-in top/bottom fade-to-black gradients.

CircuitBg

Status: archived. This component lives under an _archive/ directory in the source repo and is not part of the actively-recommended UI surface. It ships in the published NPM tarball (1.2.3) but is not auto-imported by Nuxt because of the _archive path prefix. Use it for legacy designs only — for new work prefer XMarkPatternBg with pattern="circuit".

The XMarkCircuitBg component renders a full-bleed circuit-trace pattern (orthogonal paths with small node circles) as a positioned, pointer-events-none background overlay. It applies a 0.4 parallax scroll effect and adds a 32px top + 32px bottom gradient that fades the pattern to the dark backdrop color (#0a0a0a).

Components

`<XMarkCircuitBg />`

<div class="relative h-[60vh] overflow-hidden">
  <XMarkCircuitBg
    :opacity="0.35"
    color="#164e63"
    color-secondary="#1e3a8a"
  />
  <div class="relative z-10 p-12">
    <h1>Circuit-backed hero</h1>
  </div>
</div>

Props

Prop	Type	Default	Description
`opacity`	`number`	`0.35`	Pattern opacity, 0–1.
`color`	`string`	`'#164e63'`	Primary circuit stroke color (first path and two node circles).
`colorSecondary`	`string`	`'#1e3a8a'`	Secondary circuit stroke color (second path and two node circles).

AI Context

category: Pattern
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkCircuitBg
status: archived
use-when: >
  Legacy dark hero/section background that needs a circuit-trace pattern with
  parallax scroll and built-in top/bottom fade. Prefer XMarkPatternBg
  (pattern="circuit") for new designs.
typical-page-section: Behind hero or full-bleed dark sections, especially for tech / AI / dev tools branding.
import: >
  Not auto-imported (path begins with `_archive/`). Import explicitly:
  import XMarkCircuitBg from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/CircuitBg.vue'

Edit this pageorReport an issue

WaveBg

Archived — full-bleed dual-stroke wave SVG pattern overlay with parallax, two configurable colors, and built-in top/bottom fade-to-black gradients.

PlaidBg

Archived — full-bleed crisscross plaid SVG pattern overlay with parallax, two configurable stroke colors, configurable background color, and built-in top/bottom fade-to-black gradients.