§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
17
Tech
WebGL · GLSL
Updated
Weekly
◊ 17 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.
§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