Dither `<mv-dither>`

떠다니고, 합쳐지고, 다시 갈라지는 액체 방울의 WebGL 배경입니다. 작은 돔처럼 빛을 받고 정렬된 Bayer 행렬을 통해 두 가지 잉크로 인쇄됩니다. 라이트 테마에서는 잉크가 판화처럼 그림자를 그리고, 다크 테마에서는 1비트 화면처럼 빛을 그립니다.

작동 방식

떠다니고, 합쳐지고, 다시 갈라지는 액체 방울의 WebGL 배경입니다. 작은 돔처럼 빛을 받고 정렬된 Bayer 행렬을 통해 두 가지 잉크로 인쇄됩니다. 라이트 테마에서는 잉크가 판화처럼 그림자를 그리고, 다크 테마에서는 1비트 화면처럼 빛을 그립니다. 포인터는 자신만의 방울을 지니고 다른 방울을 끌어당기며, 빛도 포인터 쪽으로 향합니다. 반짝임에는 강조 색이 쓰입니다.

카테고리	배경
유형	WebGL 요소 (`<mv-dither>`)
상태	안정
함께 설치되는 항목	shader
Keywords	safe-rewrite, webgl, shader, dither, bayer, retro, pixel, 1-bit, metaballs, interactive, hero

When to use

A retro, 1-bit or print-inspired brand wants a calm, living backdrop that reads well in light and dark themes
A hero or launch page should answer the pointer in a playful way without leaving a two-color palette
Pixel art, zines or early computer graphics set the tone and a smooth gradient would feel off-brand

Avoid when

A still, CSS-only section background is enough and no WebGL context should be spent → use Backdrop instead
Small body text sits directly on top; the crisp dither edges hurt legibility without a solid panel

설치

node scripts/add.mjs dither --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["dither"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/i18n.js, core/motion.js, core/observe.js, core/webgl.js, components/shader/shader.js, components/shader/shader.css, components/dither/dither.js.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<mv-dither data-fill></mv-dither>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;padding:1rem;color:var(--mv-fg);text-align:center;pointer-events:none">
  <div style="padding:.9rem 1.25rem;border-radius:var(--mv-radius-md);background:var(--mv-bg);box-shadow:0 0 0 1px var(--mv-border)">
    <p style="margin:0;font:700 clamp(1.5rem,4vw,2.4rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">Printed in two inks</p>
    <p style="margin:.4rem 0 0;color:var(--mv-fg-muted);font-size:.9rem">Drops merge as they drift. Hover to bring one along.</p>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`color`	CSS color	`var(--mv-fg-muted)`	Ink color (tokens accepted, read again on theme change). Darker than the background, it draws the shadows; lighter, it draws the light.
`background`	CSS color	`var(--mv-bg)`	Paper color: the lowest level and the empty floor.
`highlight`	CSS color	`var(--mv-accent)`	Color of the glints on the drops (set it to the ink color for a strict two-color look).
`pixel-size`	number	`2`	Size of a dither pixel in CSS pixels (multiplied by the pixel ratio).
`levels`	number	`2`	Number of tones between paper and ink (2 = 1-bit).
`matrix`	2 \| 4 \| 8	`8`	Side of the ordered threshold matrix: 2 and 4 give coarser, more graphic patterns.
`scale`	number	`1`	Drop size (0.25 to 4); larger drops are fewer.
`turbulence`	number	`1`	Strength of the pointer response, 0 to 3: size of the drop it carries and how hard it pulls the others (0 = none, the light still follows).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the drops on the current frame.
`interactive`	boolean		Follows the pointer only over the element (otherwise across the whole window).
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Events

Name	Description
`mv-error`	Inherited from `<mv-shader>`: the GLSL failed to compile. The element gets data-error and shows its fallback.

Content structure

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

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events; content placed inside stays in the normal reading order. The loop stops off screen and in hidden tabs, and no WebGL context is created until the element comes near the viewport. Reduced motion (OS or <html data-motion="reduce">) and paused keep one still frame, with no pointer response. Forced colors and print hide the canvas; without WebGL2 a static sketch in the theme tokens is shown. Put text on a solid panel: the dither pattern is busy behind small type.