§02 — Experimentation
TheLab.
A collection of technical explorations focusing on WebGL, GLSL shaders, audio-reactive systems and creative coding patterns. Where code meets art.
Live demos
30
Tech
WebGL · GLSL
Updated
Weekly
◊ 30 live experiments · hover any tile to feel it react
- 01 · WebGLLive · interactive↗GLSL · 2027 · Open playground →
Fluid Dynamics Shader
Custom GLSL fragment shader implementing a lightweight Navier–Stokes simulation for interactive background distortions.
- 02 · Three.jsLive · interactive↗Three.js · 2027 · Open playground →
Volumetric Lighting
Raymarching experiments focusing on soft shadows and atmospheric scattering through procedurally-generated fog volumes.
- 03 · ParticlesLive · interactive↗GPGPU · 2027 · Open playground →
Particle Systems
GPGPU particle system with curl-noise advection, instanced rendering and 1.6M particles at 60fps.
- 04 · TypeLive · interactive↗MOTIONVariable Fonts · 2025 · Open playground →
Variable Font Scroll
Scroll velocity → variable font axes (wght, wdth, slnt) for living, kinetic display headlines.
- 05 · MotionLive · interactive↗GSAP · 2025 · Open playground →
Magnetic Cursor Field
A vector field that warps cursor trails into local minima of an SDF — feels physical, not animated.
- 06 · AudioLive · interactive↗Web Audio · 2025 · Open playground →
FFT Reactive Material
Web Audio API → uniforms that drive material roughness, emissive color, and displacement.
- 07 · GlitchLive · interactive↗Postprocessing · 2027 · Open playground →
Shader Storm
A composable post-processing chain triggered by the Konami code. RGB shift, scanlines, hue cycling — layered live.
- 08 · TypeLive · interactive↗GLYPHSDF · 2027 · Open playground →
Signed-Distance Letters
Glyphs rendered from a signed-distance field for crisp scaling, soft glow, and instant kerning experiments.
- 09 · PerformanceLive · interactive↗Performance · 2027 · Open playground →
Latency Canvas
A frame-pacing visualizer drawing your real input → pixel latency. Every dot is one frame, colored by jank.
- 10 · SimulationLive · interactive↗Cellular · 2027 · Open playground →
Reaction Diffusion
A Gray–Scott reaction-diffusion field running on a single canvas pass. Hover seeds chemistry continuously; click reseeds the field.
- 11 · GeometryLive · interactive↗Computational Geom · 2027 · Open playground →
Voronoi Cells
A Voronoi tessellation of moving sites — the cursor adds a heavy site that warps the entire diagram in real time.
- 12 · VectorLive · interactive↗Curl Noise · 2027 · Open playground →
Flow Field Vectors
A grid of arrows reading the curl of a procedural noise field. The cursor injects a local rotational bias into the flow.
- 13 · ParametricLive · interactive↗Parametric · 2027 · Open playground →
Lissajous Orbits
Layered Lissajous curves whose ratios shift with cursor position. The body of the page becomes the parametric instrument.
- 14 · BehaviourLive · interactive↗Agents · 2027 · Open playground →
Boids Flock
Reynolds-style flocking — separation, alignment, cohesion. The cursor attracts the flock; hold ⇧ while moving to flip it into a predator.
- 15 · OpticsLive · interactive↗Wave Optics · 2027 · Open playground →
Wave Interference
Concentric wavefronts emitted from multiple sources. The cursor is a live source; click to drop a permanent emitter and watch the interference fringe form.
- 16 · SymmetryLive · interactive↗Reflection · 2027 · Open playground →
Kaleidoscope Mirror
A six-fold mirrored brush. The cursor draws into one wedge and the geometry replicates around the centre with alternating chirality.
- 17 · ImplicitLive · interactive↗Implicit Surfaces · 2027 · Open playground →
Metaballs Field
A field of additive radial gradients approximating an iso-surface. Spheres float and merge softly; the cursor adds a bright bump that pulls the field with it.
- 18 · TilingLive · interactive↗Generative · 2027 · Open playground →
Truchet Tiles
A grid of tiles whose orientations are seeded by the cursor — drag to retune the pattern; tile arcs snap into continuous serpentine rivers.
- 19 · TopographyLive · interactive↗Heightfield · 2027 · Open playground →
Perlin Terrain
A scrolling 2.5D heightfield drawn line-by-line from a Perlin field. The cursor lifts the ridge it hovers; click to shift the scroll direction.
- 20 · ThrowbackLive · interactive↗Demoscene · 2027 · Open playground →
DVD Bouncer
The classic 90s screensaver — colour cycles on every wall hit. Click to nudge the trajectory; hold ⇧ to spawn a second DVD that tracks the first.
- 21 · SpaceLive · interactive↗Radial · 2027 · Open playground →
Starfield Warp
Radial starfield with trails. Cursor warps the field's vanishing point; click pushes the warp factor up so the trails stretch into hyperdrive.
- 22 · CurlLive · interactive↗Polar · 2027 · Open playground →
Vortex Spiral
A logarithmic spiral of particles orbiting the cursor. Inward bias drags them home, outward bias kicks them into a fleeing galaxy.
- 23 · PhysicsLive · interactive↗Verlet · 2027 · Open playground →
Rope Physics
A Verlet-integrated rope pinned to the top edge — the cursor grabs the free end and the chain swings with gravity, friction and slack.
- 24 · DemoLive · interactive↗Demoscene · 2027 · Open playground →
Plasma Classic
A four-sine plasma palette running per-pixel through a low-cost lookup. Cursor offsets the palette index for live colour mood shifts.
- 25 · CellularLive · interactive↗Automata · 2027 · Open playground →
Falling Sand
A two-state falling-sand automaton — drag to paint sand, watch it settle into piles. Click to convert sand to stone so other grains pile on it.
- 26 · OpticalLive · interactive↗Optics · 2027 · Open playground →
Rotation Blur
A pinwheel of radial spokes rendered with progressive motion-blur. Cursor controls the angular velocity — fast feels like a turbine, slow like a fan.
- 27 · NetworkLive · interactive↗Graph · 2027 · Open playground →
Constellation Net
Floating nodes that connect to one another inside a proximity radius — the cursor is the brightest node, lit lines fade with distance.
- 28 · SDFLive · interactive↗Implicit · 2027 · Open playground →
Morphing Blob
A super-formula blob whose petals breathe with time. The cursor distorts the SDF locally; click to lock the current silhouette as a still.
- 29 · TypeLive · interactive↗Type Glitch · 2027 · Open playground →
Chromatic Aberration
Three-layer RGB-shifted typography whose offset scales with cursor velocity. Standing still it crisps; flicking the mouse shears it apart.
- 30 · OrigamiLive · interactive↗Folded · 2027 · Open playground →
Paper Folding
A grid of triangle folds whose crease angles follow a noise field. Cursor pulls the field's centre; the paper crinkles toward your hover.
§03 — The Arsenal
The tools behind the work.
Core Frameworks
- React / Next.js
- Vue / Nuxt
- SvelteKit
- TypeScript
Creative / WebGL
- Three.js / R3F
- GLSL Shaders
- GSAP / Lenis
- Framer Motion
Styling & UI
- Tailwind CSS
- Radix UI
- Variable Fonts
- Motion Systems
Backend & AI
- Node.js / FastAPI
- LangChain · OpenAI
- PostgreSQL · Supabase
- Vercel · Cloudflare