// lab
A pile of
half-finished ideas.
Tech demos, animation experiments, AI prototypes — things I poke at after the client work is done. Most end up as components in real builds.
19 live
Screensaver mode · Esc to stop
-
// live demo WebGPU Particles
Sixty thousand particles live in a GPU storage buffer while a WGSL compute shader pushes them through a curl-noise flow field, and a second render pipeline draws them additively. No Three.js — raw navigator.gpu, with a Canvas 2D fallback when WebGPU is missing.
- WebGPU
- WGSL compute
- Storage buffers
- Curl noise
Open the demo
-
// live demo Fluid
A real-time Navier-Stokes fluid solver running entirely on the GPU in raw WebGL2 — semi-Lagrangian advection, a 30-step Jacobi pressure solve, float-texture framebuffer ping-pong. Drag to stir the dye.
- WebGL2
- GLSL ES 3.00
- Float FBO ping-pong
- Navier-Stokes
Open the demo
-
// live demo Paint Worklet
A generative flow field drawn entirely by CSS. A Houdini paint worklet traces brand-colored streamlines through procedural noise, repainted each frame by animated @property custom values — no canvas, no render loop. Sliders retune it live; non-Houdini browsers fall back to a gradient.
- CSS Houdini
- Paint API
- registerPaint
- @property
Open the demo
-
// live demo Scroll-Driven
Parallax, scroll-triggered reveals, and a pinned scrubbed scene — driven by native CSS scroll-driven animations with zero JavaScript animating anything. The compositor is the engine; unsupported browsers get a clean, readable static layout.
- animation-timeline: scroll()
- view() timelines
- @property
- 0 JS
Open the demo
-
// live demo Anchored UI
Tooltips, menus, and popovers that tether to their triggers with native CSS Anchor Positioning and the Popover API — zero JS positioning math. Drag the edge probe to watch position-try fallbacks reflow the popover around the viewport corners, with a centered fallback where anchoring is not supported yet.
- CSS Anchor Positioning
- position-try
- Popover API
- @starting-style
Open the demo
-
// live demo Audio Worklet
A generative drone-and-arpeggio synth where every sample is computed inside an AudioWorkletProcessor on the audio render thread. The main thread only nudges AudioParams; an AnalyserNode drives the canvas visualizer.
- Web Audio
- AudioWorklet
- AudioParam
- AnalyserNode
Open the demo
-
// live demo Particle Storm
A few thousand particles, mouse attraction, GPU-friendly motion. Three.js with InstancedMesh + a custom update loop that respects prefers-reduced-motion.
- Three.js
- InstancedMesh
- requestAnimationFrame
Open the demo
-
// live demo Shader Bloom
A fullscreen GLSL fragment shader — time-driven plasma with mouse-reactive distortion. Pure ShaderMaterial inside a Three.js plane.
- Three.js
- GLSL
- ShaderMaterial
Open the demo
-
// live demo Spline Look Lab
A cast of soft 3D characters tracks your pointer through Spline’s Look At event system. The official viewer listens across the page, keeps the scene interactive behind the interface, and lazy-loads its self-hosted runtime.
- Spline
- Look At events
- spline-viewer
- Global pointer input
Open the demo
-
// live demo Cursor Physics
A four-part pointer playground: velocity-stretched cursor, magnetic targets, an elastic follower chain, reactive cursor modes, and click shockwaves. Vanilla JS, no library.
- Pointer Events
- CSS transforms
- requestAnimationFrame
- Spring math
Open the demo
-
// live demo Jelly UI Object Lab
A designed room of oversized Jelly UI specimens: compression buttons, machinery-scale switches, pressure rails, segmented controls, material chips, inputs, progress, tabs, and toast feedback.
- Jelly UI
- Web Components
- Canvas 2D physics
- ElementInternals
Open the demo
-
// live demo Scrollscape
A twelve-act, scroll-directed Three.js voyage through knots, satellites, crystal fields, portals, helixes, particle storms, and a composite procedural finale.
- Three.js
- 12 procedural scenes
- Scroll choreography
- Vanilla JS
Open the demo
-
// live demo AI Pulse
Token-by-token streaming UI with a breathing pulse on the request indicator. Production-ready shell wired to a pre-recorded response so it runs without an API key in the browser.
- Vanilla JS
- ReadableStream
- Anthropic SDK (prod)
- Netlify Functions (prod)
Open the demo
-
// live demo Rive Signal Chamber
A draggable energy core conducts a Rive character through three motion states while pointer parallax, scene lighting, particles, and the DOM interface react around it.
- Rive
- @rive-app/canvas
- State machine blend
- Pointer + keyboard input
Open the demo
-
// live demo View Transitions
Stage that swaps between Scene A and Scene B using the native View Transitions API — 24 distinct animations, CSS-controlled keyframes, clean fallback for unsupported browsers.
- View Transitions API
- CSS keyframes
- Native browser
Open the demo
-
// live demo WebGL Bloom
Three.js post-processing pipeline — EffectComposer + UnrealBloomPass on a real 3D scene. Emissive materials actually glow, the way film does, not a CSS filter approximation.
- Three.js
- EffectComposer
- UnrealBloomPass
- MeshStandardMaterial
Open the demo
-
// live demo Audio Reactive
A self-contained Web Audio synth — two detuned oscillators, LFO on filter cutoff — feeding an AnalyserNode that drives a real-time canvas visualizer.
- Web Audio API
- OscillatorNode
- AnalyserNode
- Canvas 2D
Open the demo
-
// live demo Tilt Cards
The Apple TV / Vision Pro card hover effect — CSS preserve-3d with a JS-driven radial highlight that tracks the cursor for that glossy "tilt to catch the light" feel.
- CSS preserve-3d
- perspective
- requestAnimationFrame
Open the demo
-
// live demo Metaballs
Three.js MarchingCubes generating an isosurface from overlapping spherical influences. Blobs merge when close, split when distant. CPU mesh rebuild every frame.
- Three.js
- MarchingCubes
- Isosurface
- Phong shading
Open the demo
// nerd-sniping welcome
Got a demo idea?
If there's a library / API / effect you want to see riffed on, send it. I'll see if it makes the list.