# Type

> Type: every key you press drops a sculpted mechanical keycap into the window, where they pile up, tumble under the pointer and flip over with Enter. A real-time WebGPU experiment by Luis Bizarro.

Every key on your keyboard drops its own keycap into the browser window: Q falls on the left, P on the right, the spacebar drops one long spacebar in the middle (only one at a time), and Shift, Tab, Caps Lock and Enter drop their wide caps. It opens by typing a few pangrams itself, very fast, then hands the keyboard over. The caps are sculpted like real ones, with tapered walls, a cylindrical dish, a rounded top edge, rows of different heights and angles, and a hollow underside with its cross-shaped stem, so the ones that land upside down show their insides. They pile against the edges of the window under gravity on GPU rigid body physics. The pointer stirs the pile, pressing turns the box over, Enter flips gravity while it is held, Backspace pops the last keycap back out, and moving the browser window shakes the box. On a phone, a tap drops a random keycap and tilting the phone steers gravity. Eight colourways after famous computers: BBC Micro, IBM PC, ZX Spectrum, Commodore 64, Famicom, Amiga, SGI and iMac. Thocky key presses and plastic clacks come from CC0 recordings.

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