3D and WebGL · 3.4
Procedural gradient field
Flowing bands like the Northern Lights. Arms that wind outward, not wedges that spin. Faceted planes of colour, cut like gemstones. Layered ribbons of colour with depth.
A shader-generated colour field where the generator function, not a list of stops, decides the character.
4 knobs
How it actually works
A CSS gradient interpolates between colours you chose. This computes a colour for every point from where that point is. That is the difference between a ramp and a field, and it is why these four can share one shader and still not look like relatives.
A fullscreen quad whose fragment shader computes colour from a positional function rather than interpolating between stops. Aurora is noise-banded. Spiral is polar-angular. Diamond is faceted. Folded is layered-offset. One quad, one uniform to switch generator, four completely different objects.
The knobs, named
Field type, palette, scale, animation speed. Their four names are the right names, so the field type is exposed as four presets of one feature, exactly as they do it.
| Knob | Source | What it teaches |
|---|---|---|
| Field type | ours | The generator function. This is the whole entry: four names, one shader. |
| Scale | ours | How large the features are. Low is a mural; high is a texture. |
| Animation speed | ours | How fast the field evolves. Zero is a still, and a still is a legitimate output. |
| Palette | ours | The colour work is the craft. The default is our own signature arc: cool top, violet middle, one warm accent. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered) for existence; mechanism INFERRED
grep -c '<canvas' on gradientlab.co/features returned 6 canvases, 4 tagged three.js r170, on the index itself. The four names and analogies are theirs, verbatim. The mechanism and every knob above are ours: they publish no parameters. Not upgraded.
- Seen on
- gradientlab.co/features/{aurora,spiral,diamond,folded}-gradient.
- Dependencies
- any shader context; three.js as seen, vanilla WebGL here
- Difficulty
- moderate (each generator is small; the palette work is the craft)
- Performance
- One quad each; cheap. Copy their perf choice: their catalogue runs 4 to 6 live previews at once, never all 19. Ours runs 6.
- Accessibility and the floor
- Speed to zero under reduced motion leaves a static field, which is the correct still, not a blank canvas.
Notes
Composability. This is the source field for the entire WebGL category. Ripple (3.1), twist (3.2) and bulge (3.3) all warp it; material (9.3) shades it; ASCII (5.5) and halftone (5.6) destroy it.