A selector made of frosted glass keys, drawn in raw WebGL2 over real radio buttons. A light sits behind the wall and follows the pointer, so the glass around it fills with blue and the bevels facing it catch a highlight. Pressing a key sinks it and gathers light under the finger; the longer it is held, the harder the release: the key springs back, latches as the selection and sends a wave of light through its neighbours, bending the glass slightly as it passes. Every key is a small pane of glass with its own pitch, synthesised with Web Audio rather than recorded: a short muted contact on press and a clear ring on release, in thin, thick or frosted glass, with the pitch rising up the wall. The engineering holds up in a real page: arrow keys move between keys, Space and Enter press them, a live region names the selection, labels never drop below 4.5:1 against the glass, reduced motion keeps the light but drops the waves, the loop sleeps off screen, and a browser without WebGL still gets working keys painted in CSS. Stage size, corner radius, three blues, how the selected key shows itself, labels, sound on or off, the glass sound and its volume are all editable live, and the export is one HTML file that loads nothing.
In collections: Custom CSS Checkboxes & Radio Buttons· Form Controls: Switches, Inputs & Selectors
UI/UX · HTML / CSS / JS · All tools