Beta

Dot Pattern `<mv-dot-pattern>`

Punktmuster in reinem CSS (auslaufend, versetzt) plus eine lebendige Canvas-Version: funkelnde Lichthöfe mit Leuchten beim Hover oder eine konzentrische Welle, die der Cursor mit elastischer Rückkehr wegdrückt.

Kategorie	Hintergründe
Typ	Web Component (`<mv-dot-pattern>`)
Status	Beta
Keywords	dots, pattern, glow, wave, interactive, hero, canvas

When to use

A quiet dot texture should add depth behind a section, docs page or app screen at almost no cost
A dev-tool or SaaS hero wants dots that twinkle, glow under the cursor or ripple away from it
Dots should fade toward the edges or center to frame content without drawing attention

Avoid when

A colorful dot grid with a reveal from the center on load is wanted for a showcase hero → use Dot Matrix instead
Lines and cells read better than dots, e.g. a blueprint look or retro floor → use Grid Pattern instead

Installation

node scripts/add.mjs dot-pattern --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["dot-pattern"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/canvas.js, core/element.js, core/motion.js, core/pointer.js, components/dot-pattern/dot-pattern.css, components/dot-pattern/dot-pattern.js.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:grid;grid-template-columns:1.7fr 1fr;min-height:320px">
  <section style="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem">
    <mv-dot-pattern variant="wave" data-fill></mv-dot-pattern>
    <div style="position:relative">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.5rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">A pattern that breathes</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Move your cursor closer, click for a shockwave.</p>
      <a class="mv-button" href="#dot-pattern">Get started for free</a>
    </div>
  </section>
  <div style="display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--mv-border)">
    <div style="position:relative;display:grid;place-items:center;overflow:hidden">
      <mv-dot-pattern variant="glow" data-fill gap="18"></mv-dot-pattern>
      <strong style="position:relative;font-size:.9rem">Twinkle + glow</strong>
    </div>
    <div class="mv-dot-pattern" data-variant="staggered" style="display:grid;place-items:center;border-top:1px solid var(--mv-border)">
      <strong style="font-size:.9rem">CSS · staggered</strong>
    </div>
  </div>
</div>

API

Attributes

Name	Typ	Default	Description
`variant`	glow \| wave		`<mv-dot-pattern>`: animated canvas version (no value: CSS dots).
`data-variant`	staggered		CSS class: staggered rows.
`data-fade`	radial \| top \| bottom \| edges \| none	`radial`	Fade mask.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).
`gap`	number	`22`	Canvas: dot spacing in px.
`size`	number	`1.4`	Canvas: dot radius in px.
`color`	CSS color	`var(--mv-dot-pattern-color)`	Canvas: base color (tokens accepted, follows the theme).
`active-color`	CSS color	`var(--mv-accent)`	Canvas: color of the halos, wave and hover.
`radius`	number	`140`	Cursor influence radius in px.
`speed`	number	`1`	Speed multiplier.

CSS classes

Name	Description
`mv-dot-pattern`	CSS dot layer (no JS). data-fill fills a positioned parent.

CSS variables

Name	Default	Description
`--mv-dot-pattern-gap`	`18px`	CSS: spacing.
`--mv-dot-pattern-radius`	`1px`	CSS: dot radius.
`--mv-dot-pattern-color`	`fg 24%`	Dot color (CSS and canvas).
`--mv-dot-pattern-x / -y`	`0px`	CSS: offset.
`--mv-dot-pattern-mask`		Custom mask (replaces data-fade).

Accessibility

Decorative: aria-hidden, pointer-events: none with data-fill (the cursor is tracked on the parent). Reduced motion: a still image; the hover glow stays instant, with no spring or wave.