This study follows the optical stack described by kube.io: generate a displacement field, apply it to the backdrop, then draw the specular material independently. The implementation uses a prebuilt map so movement only updates one transform.
01 / Setup
Installation
Copy the component HTML, CSS, and controller. The hidden SVG filter must remain in the same document as the lens.
<link rel="stylesheet" href="/liquid-lens.css" />02 / Anatomy
Three independent optical layers
- The hidden SVG builds horizontal and vertical bezel maps, then combines their red and green channels.
backdrop-filter: url(#liquid-lens-refraction)bends only the pixels behind the capsule.- CSS borders, inner shadows, and specular gradients draw the physical rim after refraction.
03 / Optical pipeline
From bezel map to material
The red channel pushes the left and right bezel in opposite directions.
The green channel encodes the top and bottom surface slope.
The combined field bends high-contrast pixels with a 34px scale.
Inner borders and directional highlights make the capsule read as glass.
04 / Contract
CSS API
| Token / selector | Default | Purpose |
|---|---|---|
--liquid-lens-width | 27rem—46rem | Scales the complete optical scene and lens. |
--liquid-lens-accent | #c86e3b | Scene geometry and lower specular warmth. |
scale | 34 | Strength of the SVG displacement map. |
--lens-x / --lens-y | px | Transform-only pointer position written by the controller. |
05 / Support
Browser behavior
Chromium currently renders SVG filters as backdrop filters. Other browsers receive the same capsule, drag behavior, highlights, and a softer blur fallback without pixel displacement.