← All components
Atmospheres / background
Dither Field
A procedural light volume translated into ordered pixels, seeded noise or fine lines.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Independently authored procedural light shader using standard Bayer/noise/line quantization. No proprietary editor source or exported media is included.
- Place the decorative primitive inside a sized parent, with foreground content in your own layer. Demo supplies a complete typography composition.
- Deterministic seed, contrast and palette update without replacing the renderer. Replay resets phase; pause, hidden, offscreen and reduced motion stop continuous frames.
- DPR is capped at 1.5 and the longer physical edge at 2048 pixels. A static CSS color field remains when graphics are unavailable.
React 19.2Modern browsersWebGL
Chungus UI · Project-authored source; distribution terms remain a release decision.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pattern | 'bayer' | 'noise' | 'lines' | "bayer" | Pattern; accepted ranges and choices are shown in the controls. |
inkColor | string | "#101217" | Ink; accepted ranges and choices are shown in the controls. |
paperColor | string | "#e4e7ec" | Paper; accepted ranges and choices are shown in the controls. |
pixelSize | number | 2 | Pixel size; accepted ranges and choices are shown in the controls. |
scale | number | 1 | Volume scale; accepted ranges and choices are shown in the controls. |
speed | number | 0.35 | Speed; accepted ranges and choices are shown in the controls. |
contrast | number | 1.15 | Contrast; accepted ranges and choices are shown in the controls. |
seed | number | 7 | Seed; accepted ranges and choices are shown in the controls. |
paused | boolean | false | Stops decorative motion while preserving useful content and interaction. |
replayToken | number | 0 | Change to restart decorative phase without remounting content; static prints and agent activity retain their state. |
className | string | '' | Additional scoped host class. |
style | CSSProperties | undefined | Inline host styles; caller owns container layout. |