Infinite Spiral

Required

container — The target element to render into. Can be a <canvas> element itself or a CSS selector string (e.g. '#myCanvas') that resolves to one. It must be a <canvas> — anything else throws an error. This is the only option without a default; if it's missing or doesn't match anything, the function throws.

Spiral shape

formula — Which mathematical spiral family is used. Valid values: 'logarithmic', 'archimedean', 'fermat', 'parabolic', 'hyperbolic', 'lituus', 'cubic', 'exponential'. Each one changes how tightly the spiral winds as you move away from the center (e.g. logarithmic spirals spread exponentially like a nautilus shell, archimedean ones have evenly spaced rings). If you pass an unknown name, it silently falls back to 'logarithmic'.

arms — How many separate spiral branches radiate from the center. 1 gives a single spiral, 2 a double one, etc. Values don't have to be whole numbers, but non-integers create a visible seam unless compensated by bands.

twist — How tightly the arms wind around the center. Higher values = more coiling over the same distance; lower values = looser, more open curls.

bands — The number of repeating stripe repetitions packed along each arm. Higher values produce more, thinner-looking rings; lower values produce fewer, broader ones.

thickness — The width of each bright band, roughly from 0 to 1. At 0 the bands collapse to hairlines; at 1 neighboring bands merge together and the pattern washes out.

warp — Adds a sinusoidal wobble to the arms, making them bend and undulate instead of forming clean curves. 0 (default) means perfectly smooth spirals.

warpFreq — The frequency of that wobble. Only meaningful when warp is above zero. The shader forces this to a whole number internally, so pass integers (3, 4, 5…) — fractional values would cause a visible jump at the angle discontinuity.

Motion

speed — A multiplier on the animation clock. 1 is normal speed, 2 is twice as fast, 0.5 half speed, 0 effectively freezes it (though use paused for that instead).

zoomMode — The style of motion. 'oscillate' makes the whole pattern breathe — zooming in and out sinusoidally. 'in' makes the bands continuously drift inward, as if falling into the center. 'out' is the same but flowing outward. Any other string is treated as 'oscillate'.

zoomAmount — The intensity of whichever zoomMode you picked. Larger values mean a deeper breathing effect or faster flow.

spin — Rotation speed of the entire spiral around its center, in radians per second roughly. 0 keeps it statically oriented.

mouseAmount — How strongly the pattern shifts in response to your pointer position. 0 disables mouse interaction entirely; higher values make the spiral lean toward the cursor. The movement is smoothed/eased rather than instantaneous.

Colors

colorA — The foreground color of the spiral bands themselves. Accepts hex strings ('#ff94f6', '#fff'), rgb()/rgba() strings, or an array of [r, g, b] in 0–1 range.

colorB — The background color between the bands.

Post-processing effects (all default to 0 / off)

glow — Intensity of a soft halo emitted around each band, giving a neon-ish bloom.

glowSize — How far that halo spreads outward from the band edges. Only visible when glow is above zero.

chroma — Chromatic aberration: slightly offsets the red and blue channels along the band phase, producing fringed rainbow edges like a cheap lens. Small values look best.

grain — Animated film-grain noise overlaid on the image.

scanline — Dark horizontal stripes across the frame, mimicking a CRT monitor.

vignette — Darkens the corners and edges of the frame, drawing the eye to the center.

posterize — Snaps colors to a limited number of levels for a flat, banded look. Note: it's a no-op unless the value is greater than 1.5 — use 2 for a very coarse effect, 8–16 for something subtler.

Color grading

contrast — 1 is neutral. Values above push darks darker and brights brighter; below 1 flattens everything toward mid-gray.

saturation — 1 is neutral, 0 turns the image grayscale, above 1 over-saturates.

brightness — A simple multiplier; 1 is neutral.

gamma — Gamma correction applied last. 1 is neutral; values above 1 lift the midtones (brighter image), below 1 darken them.

Technical / behavior

pixelRatio — The maximum device-pixel-ratio used when sizing the backing buffer. The actual ratio is min(devicePixelRatio, pixelRatio), so this acts as a performance cap: the default 1.5 means high-DPI screens render at reduced (but still sharp) resolution instead of full native, which saves a lot of GPU work. Raise it for maximum crispness, lower it on weak devices.

respectReducedMotion — When true (default), the animation automatically freezes if the user has "reduce motion" enabled at the OS/browser level (it still renders one static frame, and it re-checks live if that setting changes). Calling resume() explicitly overrides this via an internal flag.

paused — If true, the spiral starts as a single static frame instead of animating. You can toggle it later with the returned API's .pause(), .resume(), and .toggle() methods.