Liquid Silk

Show what a browser can do with nothing but a fragment shader: fourteen distinct scenes that react to every pointer movement, sound that is synthesised live rather than played from files, and all of it tuned for a trackpad — pinch, two-finger scroll, force click — while holding 60 fps on a Retina display and not going black when the GPU drops the context.

• Fourteen fragment-shader scenes on pure WebGL 1, sharing one input pipeline: pointer trail, ripples, hue, flow direction and zoom
• Scene-specific optics — specular lighting from the cursor, chromatic dispersion on glass edges, ray-marched light shafts, thin-film iridescence, gravitational lensing
• A CPU particle scene with 3 000 bodies: attraction, swirl forces and shockwave impulses rendered as additive point sprites
• Generative sound in Web Audio with zero audio files — every scene gets its own drone chord, wind colour and pluck voice; wind follows pointer speed, pitch follows the hue dial
• Trackpad-first controls: two-finger scroll shifts palette and rotates flow, pinch zooms, click sends a shockwave, force click dimples the scene; touch equivalents on phones
• Adaptive quality — a frame-time average scales render resolution so heavy scenes hold 60 fps, deep idle halves the frame rate to save battery, DPR capped at 2
• Survives GPU context loss by rebuilding programs and buffers on restore; respects prefers-reduced-motion
• Custom cursor with difference blend, scene rail, per-scene hero titles, film grain, vignette and a filmic tone curve — all in a single dependency-free HTML file

A screensaver-grade WebGL piece that opens from a single file in any modern browser, runs smoothly on a laptop GPU, and doubles as a living reference for shader techniques we reuse in client work: procedural lighting, particle systems, adaptive rendering budgets and synthesised audio without a single asset download.