Grain Gradient Background
A multi-colour gradient with grain worked through it.
PrimitiveShadersAdvanced
$ npx remotion-ui@latest add grain-gradient-bgA gradient in one of seven shapes (wave, blob, ripple, dots, truchet,
corners, sphere), with grain mixed through the colour rather than layered
over it.
The grain is the point. A shallow ramp crossing a wide frame has only about
fifty usable 8-bit levels and plateaus into visible bands wherever it is
composited; noise breaks those plateaus up. Set noise to 0 and the banding
comes back. Like the dither grid, it is measured in real pixels and ignores
scale.
Distinct from mesh-gradient-bg, which is three drifting blobs composited on
the GPU, and from animated-noise-grain, which is a grain overlay with no
gradient of its own.
Render with --gl=angle.
The grain is the point: a shallow ramp across a wide frame has only ~48 usable 8-bit levels and plateaus into visible bands, and noise is what breaks them up; set noise to 0 and the banding returns. Distinct from mesh-gradient-bg (three drifting blobs) and animated-noise-grain (a grain overlay with no gradient). Render with --gl=angle.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/grain-gradient-bg- Use when: full-frame shader backgrounds and ambient GPU fields.
- Customize: backgroundColor, colors, shape, softness, 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 { GrainGradientBg } from "@/remotion/primitives/grain-gradient-bg";
// Render with --gl=angle
<GrainGradientBg shape="wave" noise={0.35} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#050505" | Stage the shape sits on. |
| colors | string[] | ["#e4ac59", "#e07a5f", "#f0c98a"] | Up to 7 colors, blended across the shape. |
| shape | "wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere" | "wave" | The form the gradient takes. Each is a different field, not a preset. |
| softness | number | 0.6 | Edge hardness between colors, 0 = posterised, 1 = smooth. |
| intensity | number | 0.45 | Distortion between the color bands, 0–1. |
| noise | number | 0.35 | Grain overlay, 0–1. Measured in real pixels, so it ignores scale. |
| scale | number | 1 | Overall zoom, 0.01–4. |
| speed | number | 1 | Multiplies how far the field travels per second. |