Dot Matrix `<mv-dot-matrix>`

正方形のドットで構成される WebGL グリッド：読み込み時に中心から外側へ短い火花とともに点灯し、その後は各ドットがそれぞれランダムなタイミングで明るさを再抽選して穏やかに明滅します。いくつかのアクセントのドットがより明るく呼吸し、ポインターの周りにはより活発な領域が広がります。

仕組み

正方形のドットで構成される WebGL グリッド：読み込み時に中心から外側へ短い火花とともに点灯し、その後は各ドットがそれぞれランダムなタイミングで明るさを再抽選して穏やかに明滅します。いくつかのアクセントのドットがより明るく呼吸し、ポインターの周りにはより活発な領域が広がります。自己完結型（インストールするシェーダーランタイムは不要）で、画面外では一時停止し、ページの WebGL コンテキストの予算を共有し、モーション軽減では完全に表示された静止グリッドを表示します。

カテゴリー	背景
タイプ	WebGL 要素（`<mv-dot-matrix>`）
ステータス	安定版
Keywords	webgl, shader, dots, matrix, reveal, grid, flicker, hero

When to use

A hero or launch section should reveal a colorful dot grid from the center on load
A tech or data brand wants a calm flickering dot field that brightens around the pointer

Avoid when

A static or CSS-only dot texture is enough, e.g. behind docs or app screens → use Dot Pattern instead
A quiet dot texture should fade out behind a section title with no script at all → use Backdrop instead

インストール

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

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["dot-matrix"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/webgl.js, components/dot-matrix/dot-matrix.js, components/dot-matrix/dot-matrix.css。

使い方

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<mv-dot-matrix data-fill></mv-dot-matrix>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;color:white;text-align:center;pointer-events:none">
  <div>
    <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em;text-shadow:0 4px 24px rgb(0 0 0 / .45)">Every signal, one grid</p>
    <p style="margin:.5rem 0 0;opacity:.8;font-size:.9rem">&lt;mv-dot-matrix spacing="10"&gt;</p>
  </div>
</div>

API

Attributes

Name	タイプ	Default	Description
`colors`	CSS colors (3)	`var(--mv-accent), #38bdf8, #e879f9`	Dot palette: main tint, then the two accent colors (tokens accepted, re-read on theme change).
`dot-size`	number	`2.5`	Dot side length, in CSS pixels.
`spacing`	number	`10`	Grid pitch, in CSS pixels.
`reveal`	number	`1.6`	Duration of the reveal from the center (seconds per unit of distance, one unit being the element's height).
`flicker`	number	`1`	Flicker speed (0 = dots hold their level).
`accent`	number	`0.025`	Share of brighter accent dots (0 to 0.5).
`hover-radius`	number	`0.3`	Radius of the zone that wakes up around the pointer (fraction of the height).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the grid on the current frame (fully revealed if paused from the start).
`interactive`	boolean		Only pointer moves over the element itself count; by default the window is watched, so content on top does not block the hover zone.
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Content structure

Name	Description
`children`	Content placed inside the element sits above the grid.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events. The loop stops off screen and in hidden tabs; reduced motion (OS or <html data-motion="reduce">) and paused show a still, fully revealed grid with no hover zone. Without WebGL2 a still CSS dot grid is shown; forced colors and print hide the canvas.