Aave article output replica

Building glass for the web

A tactile glass-control family sharing one generated lens map across SVG and WebGL-style surfaces. Drag, tap, and scrub it — the lens moves without regenerating the displacement map.

SVG displacement maps keyboard-accessible controls QR resting state preserved

Switch

DOM / SVG filter

Tap the thumb: the highlight snaps like the article toggle.

Slider

live lens translation
42%

Toggle group

semantic radios

The selected glass pill refracts the same gradient source as the other controls.

QR code

owned canvas texture

Resting state stays crisp; intentional tap applies transient glass distortion.

Video controls

animated owned surface

Lens map debug

one shared model
  • 90×60 base lens
  • four-quadrant symmetry
  • bounded DPR/backing pixels
  • chroma + rim highlight overlays

What to look for

The glass is not just a blur: every lens uses a generated displacement map, rim lighting, chromatic fringe, and a specular glint. DOM controls use SVG filters; canvas/video-like sections use owned surfaces so the approximation is honest and stable in browsers.

  1. Flip the switch and the glass thumb snaps across.
  2. Drag the slider — only lens translation changes, not the lens map.
  3. Toggle Supply/Borrow/Stake and verify radio state updates.
  4. Tap QR: resting code remains readable, tap distortion is temporary.
  5. Press Play: controls preserve accessible button state.