Warp Bands Background
Colour bands folded through noise and a swirl, smoke, ink, or marble.
PrimitiveShaders
$ npx remotion-ui@latest add warp-bands-bgUp to ten colours laid over a base pattern, then folded by noise and a swirl.
What it looks like is mostly softness: at 0 the bands stay legible ribbons,
at 1 they melt into one continuous field of smoke or ink.
swirl and swirlIterations control the folding. More passes fold the bands
back through themselves and push it toward marble. distortion roughens the
edges without folding them.
Keep a dark colour in the list. The bands blend in order, and an all-bright set loses the separation that makes the motion readable under type.
Render with --gl=angle. The field has no entrance and no loop point; it is the
same motion at every point in the composition.
No entrance and no loop point: the same motion at every point in the composition, so any window shows it. Deterministic by construction: the library's wall 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/warp-bands-bg- Use when: full-frame shader backgrounds and ambient GPU fields.
- Customize: colors, pattern, proportion, 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 { WarpBandsBg } from "@/remotion/primitives/warp-bands-bg";
// Render with --gl=angle
<WarpBandsBg softness={1} swirl={0.8} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#0b0a08", "#e4ac59", "#0b0a08", "#c2557a"] | Up to 10 colors, blended in order. Keep a dark one to hold the bands apart. |
| pattern | "checks" | "stripes" | "edge" | "checks" | Base pattern the bands are laid over before distortion. |
| proportion | number | 0.45 | Where one color gives way to the next, 0–1. |
| softness | number | 1 | Edge hardness, 0 = hard band, 1 = full gradient. Changes its character most. |
| distortion | number | 0.25 | Noise distortion across the bands, 0–1. |
| swirl | number | 0.8 | Swirl strength, 0–1. This is what makes the bands read as marble. |
| swirlIterations | number | 10 | Layered swirl passes, 0–20. More passes, more folding. |
| patternScale | number | 0.1 | Zoom on the base pattern, 0–1. |
| scale | number | 1 | Overall zoom, 0.01–4. |
| rotation | number | 0 | Rotation of the whole field in degrees. |
| speed | number | 1 | Multiplies how far the field travels per second. |