Three glass forms
Move between a clipped prism, circular lens, and softly textured frost pane.
Spatial & material
Glass Refraction
Shape a prism, lens, or frosted pane that bends a layered light field in response to pointer and keyboard input.
A material interaction without a 3D runtime
Responsive glass with explicit performance boundaries.
Create product optics, premium feature panels, interactive identity moments, and depth cues from CSS and a tiny input controller.
Bounded input work
Pointer and keyboard events schedule at most one animation frame, only when input changes.
Complete cleanup
The export removes listeners, media-query subscriptions, and pending frames through its destroy hook.
Three-step workflow
How to use the Glass Refraction studio
- Choose the optic
Start from six materials spanning spectral, paper, ember, and smoke palettes.
- Tune the material
Balance depth, blur, dispersion, response, radius, and border.
- Test accessibly
Use pointer movement or arrow keys, then export the standalone result.
Questions, answered.
Does it require WebGL?
No. CSS gradients, transforms, and a tiny event controller produce the effect.
Can keyboard users interact with it?
Yes. Arrow keys direct the light and Home resets it to center.
Does it animate continuously?
No. A frame is requested only after active pointer or keyboard input.
What happens with reduced motion?
Input transforms reset and the static glass composition remains visible.