# Droplets

> Droplets: floating drops of water that hold swirling ink, merge when thrown together and split with a double click. A real-time WebGPU experiment by Luis Bizarro.

A handful of large water drops float in front of a soft studio backdrop, each one holding coloured ink that swirls inside it. Every drop is raymarched as part of one smooth field, so two drops that touch grow a neck and coalesce into one, with real water optics: refraction that shows the backdrop upside down and magnified, Fresnel reflections of a softbox, total internal reflection at the rims, a caustic focus and a soft shadow on the backdrop. Inside each drop a small 3D fluid simulation carries the ink, so it spreads into dense cores and fine threads like dye in water as the drop moves, breathes, wobbles and merges. Drag a drop and throw it into another to merge them and watch their inks swirl together, double click a drop to split it in two, tap a drop to drop more ink into it, hold the pointer down on a drop to keep pouring ink into it, and move the pointer near a drop to stir it. Click the backdrop for the next palette, or pick one of the twelve from the links at the bottom left: Lagoon, Coral, Jade, Iris, Prism, Saffron, Tide, Rose, Sumi, Dusk, Citrus and Candy. After Mark Fancher's "Pond in the Drop" and Lukas Vojir's "EXP 004 Color Flow".

- Live: https://droplets.bizar.ro/ (needs WebGPU: a recent Chrome, Edge or Safari)
- Built with: Raw WebGPU and WGSL, TypeScript and Vite.
- Author: Luis Bizarro, creative technologist and real-time 3D developer for the web

## Author

Luis Bizarro builds real-time 3D for the web with WebGL and WebGPU: shaders, interactive scenes and award-winning creative websites. His work includes Apple, Airbnb, Active Theory, National Design Studio, UNIT9 and independent studios.

- [Portfolio](https://bizar.ro/): every project and experiment
- [Portfolio for agents](https://bizar.ro/llms.txt)
- Contact: luis@bizar.ro