# Shatter

> Shatter: glass that breaks in extreme slow motion where you click, its shards spiralling out of view through warm bokeh while a new one grows in its place. A real-time WebGPU experiment by Luis Bizarro.

A glass solid (a sphere, block, column, diamond or gem) hangs in a dark, warm room. Clicking breaks it at the pointer: the cracks race out from the impact, fine debris bursts from it and the big shards far away barely move, and then time slows to a crawl while a slow vortex spirals everything outward. Moving the pointer through the floating glass pushes the shards with a smooth wake. The impact carries the shards out of the frame, and a new glass grows in the middle while they go, so you can keep breaking glass after glass. Every new glass is a random one of 40 variations, and every break plays recorded glass breaking (CC0 recordings by Till Behrend and rubberduck on OpenGameArt). The fracture is a Voronoi fracture computed in a web worker (radial and concentric around the impact), the shards are rigid bodies moved on the GPU, and every shard is thin glass with Fresnel reflections, refraction, lit bevels on its cut edges and specular glints. A real depth of field turns out-of-focus shards and glinting dust into soft bokeh. After the Netflix "Gypsy" main titles by Imaginary Forces.

- Live: https://shatter.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