beta

Dot Pattern `<mv-dot-pattern>`

Patrón de puntos en CSS puro (desvanecido, escalonado) y una versión viva en canvas: halos que titilan con un brillo al pasar el cursor, o una onda concéntrica que el cursor aparta con un retorno elástico.

Categoría	Fondos
Tipo	Web Component (`<mv-dot-pattern>`)
Estado	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

Instalación

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

Agente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["dot-pattern"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Archivos copiados (dependencias incluidas): 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.

Uso

Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables CSS:

<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	Tipo	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.