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.