Dither <mv-dither>
WebGL-Hintergrund aus Flüssigkeitstropfen, die treiben, verschmelzen und sich wieder trennen, beleuchtet wie kleine Kuppeln und durch eine geordnete Bayer-Matrix in zwei Druckfarben gedruckt: Im hellen Theme zeichnet die Farbe die Schatten wie ein Kupferstich, im dunklen Theme zeichnet sie das Licht wie ein 1-Bit-Bildschirm.
So funktioniert es
WebGL-Hintergrund aus Flüssigkeitstropfen, die treiben, verschmelzen und sich wieder trennen, beleuchtet wie kleine Kuppeln und durch eine geordnete Bayer-Matrix in zwei Druckfarben gedruckt: Im hellen Theme zeichnet die Farbe die Schatten wie ein Kupferstich, im dunklen Theme zeichnet sie das Licht wie ein 1-Bit-Bildschirm. Der Zeiger trägt einen eigenen Tropfen, der die anderen anzieht, und das Licht wendet sich ihm zu; Glanzlichter nehmen die Akzentfarbe an.
| Kategorie | Hintergründe |
|---|---|
| Typ | WebGL-Element (<mv-dither>) |
| Status | stabil |
| Installiert auch | 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
Installation
node scripts/add.mjs dither --out ./src/marvelousKI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["dither"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Kopierte Dateien (inklusive Abhängigkeiten): 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.
Verwendung
Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:
<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 | Typ | 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.