Webcam pond
See yourself reflected in a koi pond. The koi are plain HTML spans, refracted by GPU water. Feed them from a native lily pad.
The live examples need JavaScript. Underglass home ยท Source on GitHub
Examples
- Postcard studio: Design a postcard with real inputs, radio swatches and stamps. One native React form edits the GPU-presented card.
- Card deck: Deal, stack, fan and shuffle four layer cards with staggered GPU motion. Like a card mid-flight: its button stays native.
- Shader lab: Chain ripple, chromatic, dissolve and a custom WGSL aurora on decorative artwork, with native sliders for every parameter.
- Notification stack: Send notifications that slide in and out with Presence while their Dismiss buttons remain ordinary React buttons.
- Small tasks, real controls: Try the maintained task app: create, search and edit local tasks with native inputs and a detail view.
- Webcam pond: See yourself reflected in a koi pond. The koi are plain HTML spans, refracted by GPU water. Feed them from a native lily pad.
- Fluent release board: Stock Fluent UI v9 components that burn away, materialise and take a hit on the GPU, and still work as real controls. Throw cards between lanes on spring physics.
- GPU or CSS?: Six jobs done twice, side by side: the best CSS technique on the left, Underglass on the right, with a frame meter. One of them is a job where CSS wins.
- Strata components: Every Strata component, from buttons to tables, dialogs and toasts, in one design language that CSS draws flat and the GPU lights in 3D.
- Instrument gallery: Every Instrument component as hardware: knobs, faders, switches, lamps, meters, a jog wheel and a patch bay, plus a synthesiser voice that is wired like the real thing.