Effects

Liquid is a real-time fluid simulation running entirely on the GPU in WebGL2. A velocity field is advected each frame, pressure is solved over a few Jacobi iterations, and a dye texture is pushed around by the flow — the same maths behind film smoke, distilled to a few fragment-shader passes.

As a hero background it runs content-less: the dye colours drift over your token gradient while the wrapper injects a gentle self-running current so it stays alive even when no one is touching it. Move the pointer across it and you add real velocity — the flow responds under your cursor.

That self-running motion is a pluggable ambient algorithm: pick "Ambient" to switch between the cohesive aurora band (the hero default), rising smoke/vapor wisps that come into existence, spread, and dissipate, a calm directional drift, or a slow swirl — and retune its rate, size, drift, life, and turbulence live. The colour tracks your theme.

Where the experimental html-in-canvas API is available (Chrome origin trial) the same shader can additionally refract the real DOM beneath it while the text stays selectable; everywhere else it degrades to the pure WebGL2 background. Under prefers-reduced-motion, or without WebGL2, only the static gradient shows.

Ripple renders expanding wave trains as an analytic height field in a single fragment-shader pass, then refracts the surface along the wave slopes with a touch of chromatic dispersion and specular glint on the crests — so it reads like light through moving water.

It is interactive by nature: rings spawn on pointer press, and in hover mode a wake follows the cursor. An ambient interval also drops rings at random positions on its own, so the demo stays alive with no input. It is light enough to run on phones.

Like the other effects it runs over WebGL2 everywhere and enhances to distort real DOM where html-in-canvas is available. Reduced-motion and no-WebGL2 viewers get the static base layer.

Glass is a physically-motivated lens: it traces refraction through a bevelled glass surface with a configurable index of refraction, adds chromatic aberration at the rim, a fresnel reflection, and an optional specular shine that keeps the lens visible even over flat backgrounds.

On load it drifts gently on its own as a floating lens, so it is visibly alive before you touch it; move the pointer and it follows your cursor, and it can magnify elements you mark as targets. It is a single-pass shader — cheap enough for phones. With html-in-canvas it refracts the live DOM; without it, it renders as a self-lit glass bead over the base layer.

Reduced-motion viewers and browsers without WebGL2 see the static base layer, never a broken canvas.

Particle Object is the outlier here: a real-time three.js scene, not a fragment-shader pass. A 3D form is rebuilt from thousands of GPU particles that hold its silhouette, float and rock gently on their own, and shimmer in place — a genuine WebGL 3D object rendered with the three library.

It is the reason `three` is a dependency at all, and it is deliberately isolated: the three engine and this scene live entirely inside this effect’s own dynamically-imported chunk, so they never enter the base bundle or any of the fragment-shader effect chunks. Nothing is fetched to run it — no model, no font, no decoder — so it works offline and inside a strict CSP.

The form is a control, not a constant. Two forms are procedural geometry (a torus knot, a sphere shell); the others are sampled from vectors at runtime — a wordmark shaped from whatever font the page already has, and whatever silhouette the host app hands in as data. Both are rasterised to an offscreen alpha mask, and a distance transform inflates that silhouette into a rounded volume, so a 2D source still reads as a 3D object from any angle. The library ships no artwork of its own: an app passes its own mark in through `formSpec`, so adding the next form is data, not code.

It is cursor-reactive: move the pointer across the surface and a push field shoves the nearest particles aside, and they spring back home. Under prefers-reduced-motion, or without WebGL, only the static token gradient shows, and it simplifies out on small screens for frame-rate.