A study of refraction, optics, and surface tension on the web. Built with pure mathematics, SVG displacement maps, and Astro.
Breakdown of the math, the SVG pipeline, and the implementation choices behind the refraction effect.
ToolTune the liquid glass parameters and copy a self-contained SVG filter snippet for your own site.
ReferenceCredit to the original article that sparked the effect and guided the refraction-first approach.
A free-floating magnifying glass demonstrating real-time backdrop refraction and chromatic aberration over complex DOM elements.
A hyper-tactile button with inner tension. Click and hold to feel the surface pull inward.
A toggle switch with physical mass. Drag or click to snap. Refraction intensity increases when pressed.
A liquid slider track. The glass thumb stretches and distorts based on dragging velocity.
A custom glass pointer with spring physics, stretching and refracting based on velocity.
A glass input field that reacts to typing with microscopic physical tremors and refraction bursts.
A floating action button whose stacked glass pieces push and settle against each other.
An interactive, 3D parallax credit card floating over animated circles.
