Dot Pattern `<mv-dot-pattern>`

纯 CSS 点阵图案（渐隐、交错），外加一个会动的 canvas 版本：闪烁的光晕配合悬停发光，或一圈圈同心波纹被光标推开后弹性回弹。

分类	背景
类型	Web Component（`<mv-dot-pattern>`）
状态	稳定版
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

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["dot-pattern"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（包括依赖）：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。

用法

标准标记，可在此基础上通过属性、data-* 和 CSS 变量进行定制：

<div style="display:flex;flex-wrap:wrap;min-width:0;min-height:320px">
  <section style="flex:1.7 1 20rem;min-height:320px;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="flex:1 1 14rem;min-height:240px;display:grid;grid-template-rows:1fr 1fr;box-shadow:-1px 0 0 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	类型	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: the canvas is aria-hidden and the CSS dots are a pseudo-element, so only content placed inside the element is exposed to assistive tech (put aria-hidden="true" on an empty .mv-dot-pattern div yourself). pointer-events: none with data-fill (the cursor is tracked on the parent); the wave click only adds a visual shock, no action. The loop pauses off screen and in hidden tabs, and every listener and observer is released on disconnect. Reduced motion (OS or [data-motion="reduce"]): a still image; the hover glow stays instant, with no spring or wave. Forced colors and print hide the dots.