nuxt-x-marketing

DotsBg

Archived — full-bleed dotted SVG pattern overlay with parallax, configurable color and opacity, and built-in top/bottom fade-to-black gradients.

DotsBg

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

The XMarkDotsBg component renders a full-bleed dotted SVG pattern (40×40 cell, 2px radius) 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

`<XMarkDotsBg />`

<div class="relative h-[60vh] overflow-hidden">
  <XMarkDotsBg :opacity="0.5" color="#164e63" />
  <div class="relative z-10 p-12">
    <h1>Dot-backed hero</h1>
  </div>
</div>

Props

Prop	Type	Default	Description
`opacity`	`number`	`0.5`	Pattern opacity, 0–1.
`color`	`string`	`'#164e63'`	Fill color for the dots.

AI Context

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

Edit this pageorReport an issue

Background

Archived — full-bleed SVG pattern background with 6 pattern variants (dots, grid, diagonal, topography, circuit, waves), configurable color, opacity, and background size.

GlowDivider

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