01 · 2026 · live
Mizuniwaa koi pond you can touch.
水庭, "water garden". A realistic koi pond that runs in the browser. Koi with spine-driven swimming school around a pebble pond; you can poke the water and watch ripples refract the floor, drop food and watch the fish rise to it, scatter them, or drag a finger through the water.
Problem
Most browser fish tanks are sprites on a loop. The goal was a pond that feels alive and answers touch: water that ripples and bends light the way real water does, and koi that swim, school, feed and startle like fish rather than looping animations, at a smooth frame rate on both laptops and phones.
Approach
A single imperative pond engine runs inside React Three Fiber's frame loop, so React never re-renders per frame and the UI talks to it only through a Zustand store. Each frame turns pointer input into ripples, food and steering forces; steers the koi with boids-style behaviour and rebuilds their spines; runs a fixed-timestep wave equation on ping-pong GPU render targets; draws the underwater scene off-screen; and composites it through custom GLSL that refracts the floor through the ripple normals and adds Fresnel reflection and sun glint. GSAP handles time-based transitions such as spawning, panic and time-of-day lighting.
Role
Solo build. Designed and implemented the rendering pipeline, GLSL shaders, ripple simulation, koi geometry and spine physics, schooling behaviour, interaction modes, adaptive quality, control panel and the music player.
Highlights
- Each koi is one draw call: body and fins are parametric grids bent along a 14-joint spine in the vertex shader, with a tail wave that speeds up with swim speed and fins that row, tuck and brake on turns.
- GPU ripple simulation on half-float ping-pong targets, refracting the pebble floor and its caustics, with Fresnel sky reflection and a localised sun glint.
- Six cursor modes (ripple, trail, feed, attract, scatter, hand) with multi-touch support and keyboard shortcuts.
- Seven procedurally patterned koi varieties (Kohaku, Sanke, Showa, Ogon, Asagi, Tancho, Butterfly); no textures needed.
- Adaptive quality steps through four levels by measured frame rate and locks to avoid flicker; touch devices start at Medium.
- Spotify-style music player with Media Session controls, remembered settings, and no autoplay.
Stack
- TypeScript
- Next.js
- React Three Fiber
- three.js
- GLSL
- GSAP
- Zustand
- Tailwind CSS
- Vercel
At a glance
- Surface
- Interactive WebGL koi pond
- Rendering
- React Three Fiber, custom GLSL
- Simulation
- GPU wave equation, boids, spine physics
- Input
- Mouse, pen and multi-touch, six modes
- Status
- Live / private source