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.