reference
Every knob
One object. Accepted by createField, both component bindings, and update().
01 — options
preset
FieldPreset
Applies a bundle of the options below. Anything passed alongside it wins.
default 'clouds'
generator
'noise' | 'cells' | 'rings' | 'waves' | 'grid' | 'spiral'
Which scalar field feeds the dither.
default 'noise'
falloff
'up' | 'down' | 'fill'
Vertical density ramp.
default 'down'
mode
'fbm' | 'ridged' | 'billow'
Shapes the sample. Ridged inverts the midpoint, billow folds it.
default 'fbm'
scale
number
Frequency multiplier.
default 1
aspect
number
Anisotropy. Below 1 squashes horizontally, above 1 stretches vertically.
default 1
warp
number
Domain warp strength. 0 is clean, 2.5 is turbulence.
default 1
contrast
number
Narrows the tonal window toward hard edges.
default 1
speed
number
Time multiplier.
default 1
flow
{ x: number; y: number }
Constant drift applied to the sampling origin.
default { x: 0, y: 0 }
seed
number
Offsets the field and its start time.
default 0
intensity
number
Multiplies the palette index before dithering.
default 1
theme
'light' | 'dark'
Picks the built in palette. Ignored when tint or palette is set.
default 'dark'
tint
string
Hex colour. Derives a seven step ramp around it.
default —
palette
Uint32Array
Your own packed ramp. Index 0 must be fully transparent.
default —
interactive
boolean
Pointer bump near the cursor.
default true
playing
boolean
Stops the loop. The last frame stays.
default true
fps
number
Render cap.
default 24
02 — preset values
Nothing hidden
| preset | generator | falloff | mode | scale | aspect | warp | contrast | speed | flow |
|---|---|---|---|---|---|---|---|---|---|
| clouds | noise | down | fbm | 1 | 1 | 1 | 1 | 1 | 0,0 |
| fog | noise | fill | fbm | 0.55 | 0.5 | 0.5 | 0.6 | 0.45 | 6,0 |
| streaks | noise | fill | billow | 1.5 | 0.3 | 0.75 | 1.25 | 1.2 | 18,0 |
| terrain | noise | fill | ridged | 1.1 | 1 | 0.35 | 2.4 | 0.2 | 0,0 |
| plasma | noise | fill | fbm | 0.9 | 1 | 2.4 | 1.3 | 2.4 | 0,0 |
| smoke | noise | up | fbm | 1.15 | 1.5 | 1.7 | 0.95 | 1.1 | 0,-20 |
| nebula | noise | fill | ridged | 0.62 | 1 | 1.5 | 2.1 | 0.3 | 0,0 |
| static | noise | fill | fbm | 3.4 | 1 | 0 | 3.2 | 3.2 | 0,0 |
| aurora | noise | up | ridged | 0.8 | 0.35 | 1.9 | 1.8 | 0.7 | 9,0 |
| marble | noise | fill | ridged | 1.3 | 1 | 2.6 | 3 | 0.15 | 0,0 |
| cells | cells | fill | fbm | 1 | 1 | 0.6 | 1 | 0.6 | 0,0 |
| cracks | cells | fill | ridged | 1 | 1 | 0.2 | 2.2 | 0.2 | 0,0 |
| bubbles | cells | up | billow | 1 | 1 | 1.1 | 0.8 | 1.1 | 0,-6 |
| mosaic | cells | fill | billow | 1 | 1 | 0 | 1.6 | 0.08 | 0,0 |
| ripple | rings | fill | fbm | 1 | 1 | 0 | 1 | 1 | 0,0 |
| sonar | rings | fill | ridged | 0.7 | 1 | 0 | 2.4 | 0.6 | 0,0 |
| droplet | rings | fill | billow | 1.6 | 1 | 0.9 | 1.5 | 1.5 | 0,0 |
| moire | waves | fill | fbm | 2.4 | 1 | 0 | 2.8 | 0.5 | 0,0 |
| silk | waves | fill | fbm | 0.85 | 1 | 0.45 | 0.85 | 0.8 | 0,0 |
| current | waves | fill | billow | 1.5 | 1 | 1.1 | 1.5 | 1.4 | 0,0 |
| checker | grid | fill | fbm | 1 | 1 | 0 | 2.6 | 0.3 | 4,0 |
| weave | grid | fill | ridged | 1.6 | 1 | 0.3 | 1.4 | 0.5 | 0,0 |
| circuit | grid | fill | billow | 0.7 | 1 | 1.2 | 2.8 | 0.4 | 0,0 |
| vortex | spiral | fill | fbm | 1 | 1 | 0.4 | 1 | 1 | 0,0 |
| galaxy | spiral | fill | ridged | 1 | 1 | 1.1 | 1.6 | 0.35 | 0,0 |
| portal | spiral | fill | billow | 1 | 1 | 0.2 | 2.6 | 1.8 | 0,0 |
clouds
Soft fbm billows gathering at the top edge.
fog
Low frequency haze that barely moves.
streaks
Squashed billow noise pushed sideways. Interference, not water.
terrain
Ridged noise at high contrast. Sharp veins.
plasma
Warp and time at 2.4. The domain eats itself.
smoke
Stretched vertically, drifting up into the ceiling.
nebula
Ridged at low frequency. Structure without edges.
static
No warp, frequency past the pixel grid.
aurora
Ridged bands squashed flat and drifting sideways.
marble
Heavy warp on ridged noise, almost still.
cells
Voronoi edges wobbling against each other.
cracks
Inverted cell edges at high contrast.
bubbles
Cell bodies rising and fading out of the top.
mosaic
Flat voronoi tiles, nearly frozen.
ripple
Concentric rings expanding from the centre.
sonar
Hard ringed sweep at low frequency.
droplet
Tight folded rings with a warped centre.
moire
Three sine waves crossing at high frequency.
silk
Soft low frequency interference.
current
Folded waves with heavy warp.
checker
Clean checkerboard drifting sideways.
weave
Interlocked grid lines from a ridged fold.
circuit
Warped grid broken into traces.
vortex
Two spiral arms turning from the centre.
galaxy
Ridged spiral arms with a soft core.
portal
Fast folded spiral with a hard rim.
03 — handle & exports
Two methods
const field = createField(canvas, { preset: 'terrain' });
field.update({ warp: 2.2 });
field.destroy();- update merges options, rebuilds the palette and ramp, redraws. Never rebuilds the noise tables.
- destroy cancels the frame, disconnects the ResizeObserver, removes every listener.
createField
(canvas, options?) => FieldHandle
Mounts the renderer. Draws one frame synchronously.
PRESETS
Record<FieldPreset, PresetShape>
Every preset and its exact values.
PRESET_NAMES
FieldPreset[]
All 26 names, in catalogue order.
GENERATOR_NAMES
FieldGenerator[]
The six scalar field families.
packPalette
(colors) => Uint32Array
Packs RGBA tuples into the compositor layout.
paletteFromTint
(hex, theme) => Uint32Array
Builds the seven step ramp. Throws on a non hex value.