Animated Shader Backdrops

Here's what each option in the NebulaShader.create() call does. Anything you don't pass falls back to the built-in DEFAULTS — notably, style is missing from your call, so it runs the default "liquid" (liquid metal) pattern.

style —  The available values are: "liquid", "plasma", "aurora", "mesh", "flow", "cells", "waves". (It can also be changed later via instance.set("style", "aurora"), which rebuilds the shader program.)

Colors

c1: "#000000" — The first palette color (uC1 in the shader). Each style uses the three colors differently, but generally c1 is the base/low end of the gradient. In the liquid style it fills the darker regions of the noise field. Pure black here, so the dark areas go fully black.

c2: "#0134cb" — The second color (uC2), usually the midtone. It's blended in as the pattern's intensity value rises. Deep blue here, so the mid-tones of the metal read as rich blue.

c3: "#f75555" — The third color (uC3), the highlight/accent color. In "liquid" it appears in the brightest crests; in other styles it has specific roles (cell borders in "cells", the lines in "waves"). Coral red here, giving hot highlights against the blue.

bg: "#000000" — The background color (uBg) that the pattern fades into or is layered over. How visible it is depends on the style — "plasma" and "flow" mix it in globally, "aurora" uses it as the canvas, "mesh" fades toward it away from the blobs. Black, so it blends invisibly with c1.

Pattern shape and motion

speed: 1 — Multiplies the time handed to the shader. 1 is real-time pace, 2 doubles it, 0 freezes the pattern's internal motion (the mouse lens still works, since that's applied separately from time).

zoom: 1.8 — Sets the coordinate scale (uScale). Higher values make features smaller and more numerous (zoomed out); lower values make big, blobby shapes. 1.8 is the default.

distort: 1.12 — The strength of domain warping: coordinates get displaced by a noise field before shading, so the pattern smears and swirls like it's behind funhouse glass. 0 = clean geometry; higher = more melted. 1.12 is quite strong (default is 0.35), giving heavy liquid swirl.

warp: 0 — A secondary turbulence/detail knob whose exact effect depends on the style (it shifts noise frequencies, band widths, blob sizes, or line density). 0 turns that extra layer of complexity off — cleaner and smoother than the default 0.6.

Post-processing (applied on top of any style)

aberr: 0.65 — Chromatic aberration. The scene is effectively rendered three times with the red and blue channels sampled at slightly offset positions (a radial offset that grows toward the edges, plus a constant diagonal one), producing RGB fringing like a cheap lens. 0 disables it entirely — which also skips the two extra render passes, a real performance saving. 0.65 is a clearly visible but not extreme amount.

grain: 1 — Animated film grain: per-pixel random brightness noise, re-rolled every frame (seeded by time). 0 = pristine image; 1 = maximum, every pixel shifted by up to ~±0.18. Combined with the low saturation, this gives a heavy, filmic/analog look.

contrast: -0.13 — Applied as (color − 0.5) × (1 + contrast) + 0.5. Positive values punch up contrast, negative values flatten it. −0.13 slightly washes the image out, softening the palette.

sat: 0.45 — Saturation, done by mixing the color with its grayscale luminance. 0 = black & white, 1 = untouched, above 1 = exaggerated. 0.45 pulls the colors hard toward gray — muted and moody.

vignette: 1 — Darkens the frame toward the edges and corners with a smooth radial falloff (up to 85% darkening at the corners at max). 0 = off; 1 here gives a strong "spotlight" framing.

Interaction

mouse: true — Enables the pointer lens. The cursor position is fed into the shader, and pixels near it are pushed radially outward — a bulge/refraction that follows the mouse. The position is eased each frame (lerp at 0.08), so it trails fluidly rather than snapping. When the pointer leaves, it eases back to center. Setting false forces the effect off regardless of mouseAmount.

mouseAmount: 1.0 — The strength of that lens distortion. 0 = nothing; 1 = full strength, which is what's set here.

Performance and behavior

animate: true — Master switch for motion. false freezes the animation clock (the canvas still redraws, so the mouse lens and resize still respond). Note this can be overridden by the next option.

respectReducedMotion: true — Accessibility guard. If enabled, it checks the OS/browser prefers-reduced-motion: reduce setting; if the user has requested less motion, the animation is frozen even though animate is true.

maxDpr: 2 — Caps the device pixel ratio used for the canvas backing buffer (min(devicePixelRatio, maxDpr)). This trades sharpness for GPU cost on high-DPI screens: 1 renders at CSS resolution (soft on retina, fastest), 2 allows full retina sharpness, and a 3× phone gets clamped to 2.

timeOffset: 0 — A constant added to the shader's time (elapsed + timeOffset), i.e. it starts the animation partway through its evolution rather than at the beginning. Useful for making multiple instances look different from each other, or for skipping an uninteresting opening state.