The Inspiration There is something hypnotically soothing about Céleste Boursier-Mougenot’s Clinamen. If you’ve ever seen it—or heard it—you know exactly what I mean. Dozens of white porcelain bowls floating in an azure pool, gently colliding to produce a random, resonant chime. It is a visual and auditory meditation on "clinamen"—the Epicurean concept of the unpredictable swerve of atoms that creates the world.
I wanted to capture that feeling in a browser.
The Challenge: Digital Physics, Organic Sound Recreating this experience digitally wasn't just about moving circles on a screen. It required three distinct layers of simulation working in harmony:
The Water (Fluid Dynamics): Real water isn't static. I implemented a complex flow field that mimics the installation's actual mechanics: a central vortex current, a gentle "spout" upwelling from the center, and a rhythmic pulse to keep things moving. This ensures the bowls never get stuck in a loop but wander endlessly, just like in the real gallery.
The collision (Physics): The bowls needed to interact realistically. They don't just bounce; they drift, rotate, and transfer energy. I programmed three distinct sizes of bowls—Small, Medium, and Large—mimicking the nesting sets used in the original artwork. Each collision is calculated to determine the "velocity" of the impact.
The Sound (Generative Audio): This was the most critical part. Using Tone.js, I built a physics-based audio engine.
Small bowls (26px) trigger high, tinkling notes with short decay.
Large bowls (36px) trigger deep, resonant chimes that hang in the air.
The scale is tuned to a Pentatonic key, ensuring that no matter how random the collisions, the result is always harmonious and meditative.
The Stack
React & Vite: For a fast, modern UI.
Framer Motion: Handling the smooth, interpolated animations of the water currents.
Tone.js: Powering the real-time synthesis of the bell sounds.
Tailwind CSS: For the clean, gallery-like aesthetic.
Experience It The result is an "infinite" piece of music. No two moments are the same. You can adjust the flow, changing the "temperature" of the piece from a slow drift to a busy crescendo.
Launch the interactive Digital Artwork in a new tab
View the Digital Artwork
