Dither Field Background
A two-colour ordered-dither field, quantised to a pixel grid.
PrimitiveShaders
$ npx remotion-ui@latest add dither-field-bgA smooth pattern pushed through a dither matrix, so it resolves into two colours on a pixel grid rather than a gradient. It reads as print halftone or an early bitmap display, and it is the one background here that holds an edge: the grid gives type something to sit against.
shape picks the pattern underneath and pattern picks the threshold matrix:
the Bayer sizes are ordered and regular, random is white noise and reads as
film grain.
The shapes split in two. simplex, warp, dots and wave tile and fill the
frame at any scale, use these for a background. ripple, swirl and sphere
are bounded shapes with an edge, so below scale={1} they sit as an object in
an empty field rather than covering it.
pixelSize is measured in real pixels and deliberately ignores scale, so
zooming moves the pattern underneath a grid that stays put. Raise it for a
coarser, more obviously digital field; at 1 the dither almost disappears.
Render with --gl=angle. Motion comes from the frame only, so the same frame
renders to identical pixels every time.
The dither grid is measured in real pixels and ignores scale, so zooming moves the pattern underneath a grid that stays put. Deterministic by construction: the shader library's own requestAnimationFrame clock is switched off and the time is set from useCurrentFrame(). Render with --gl=angle.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/dither-field-bg- Use when: full-frame shader backgrounds and ambient GPU fields.
- Customize: backgroundColor, inkColor, shape, pattern, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { DitherFieldBg } from "@/remotion/primitives/dither-field-bg";
// Render with --gl=angle
<DitherFieldBg shape="warp" pattern="4x4" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#070605" | The unlit half of the two-tone field. |
| inkColor | string | "#e4ac59" | The lit half. The field only ever holds these two colors. |
| shape | "simplex" | "warp" | "dots" | "wave" | "ripple" | "swirl" | "sphere" | "warp" | Pattern the dither is sampled from before the grid quantises it. simplex, warp, dots and wave fill the frame; ripple, swirl and sphere are bounded shapes. |
| pattern | "random" | "2x2" | "4x4" | "8x8" | "4x4" | Threshold matrix. Bayer sizes are ordered; random reads as film grain. |
| pixelSize | number | 2 | Size of one dither cell in pixels, 0.5–20. Larger reads more retro. |
| scale | number | 1 | Zoom on the underlying pattern, 0.01–4. Below 1 a bounded shape stops covering the frame. |
| speed | number | 1 | Multiplies how far the field travels per second. |