Move across the board
Flip-dot
An electromechanical flip-dot board rebuilt in 3D. Every disc turns as your hand passes over it, and each one plays a note.
Flip-dot boards are the clattering displays from old stations and buses: hundreds of small discs, coloured on one side and black on the other, kicked over by tiny magnets. This one answers to your hand. Move across it and the discs turn in a wave of colour, ringing a note each.
How it works
Every disc is a real two-sided disc on its own axle, sitting in a square cell with walls, rendered in WebGL as a single instanced mesh so thousands of them stay smooth. A soft light follows the pointer, so the clear-coated faces catch a glint as they turn. The project's name is rasterised onto the grid and the board writes it on arrival.
The sound is synthesised too. Each disc that flips plays a kalimba-like note whose pitch follows its column on a pentatonic scale, low on the left and high on the right like the colour gradient, so a sweep across the board always plays a melody that fits. In camera mode, an on-device model cuts you out of your webcam image and your silhouette drives the board live. Without WebGL, a flat 2D version takes over.
Built with
- Three.js and WebGL 2 (instanced discs, physically based lighting)
- Web Audio API, pentatonic kalimba synthesis
- MediaPipe selfie segmentation, running on the device
- Canvas 2D fallback