Dot Matrix `<mv-dot-matrix>`

WebGL grid of square dots: on load they switch on from the center outward with a short spark, then each dot re-rolls its brightness at its own random moments for a calm flicker, a few accent dots breathe brighter, and a livelier zone opens around the pointer. Self-contained (no shader runtime to install), it pauses off screen, shares the page's WebGL context budget and shows a fully revealed still grid under reduced motion.

Category	Backgrounds
Type	WebGL element (`<mv-dot-matrix>`)
Status	stable
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

Install

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

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["dot-matrix"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): 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.

Usage

Canonical markup, to start from and customize with attributes, data-* and CSS variables:

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