X Enterprises
nuxt-x-marketing

WaveBg

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

WaveBg

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="waves".

The XMarkWaveBg component renders a full-bleed horizontal wave pattern (two stacked waves with different opacities and colors) 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

<XMarkWaveBg />

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

Props

PropTypeDefaultDescription
opacitynumber0.4Pattern opacity, 0–1.
colorstring'#164e63'Primary wave stroke color (the upper wave).
colorSecondarystring'#1e3a8a'Secondary wave stroke color (the lower wave).

AI Context

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

GlowDivider

Archived — thin horizontal section divider with 3 glow intensities (subtle, medium, strong), 7 color presets, and configurable vertical spacing.

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.

Copyright © 2026