Liquid Glass
Apple-style liquid glass for the web: a translucent panel that visibly bends the content behind it at its rim, with a faint prism fringe, while the interior stays legible. One file, zero dependencies, MIT-licensed, works on any DOM element.
Most 'glassmorphism' on the web is a blur and a border. Real glass bends light. This module does actual refraction: an SVG displacement map bulges the backdrop at the panel's rim with a chromatic fringe, running on the GPU per frame in Chromium browsers, and degrading to a tuned frosted-blur fallback in Safari and Firefox.
The module owns the optics — the SVG filter, the displacement map generated from your element's real border-radius, resize handling, and the fallback. You add a little CSS dressing (tint gradient, inset highlights, drop shadow), and that is what makes it read as physical glass.
The SVG filter must set color-interpolation-filters="sRGB". Without it, filters default to linearRGB, which remaps the displacement map's neutral gray and ghosts a copy of your entire background up and to the left. That single line cost most of a day; the module sets it so nobody else pays for it again.
The part I actually love: it ships as a Claude Code skill. Point it at any component — a button, a card, a whole nav — say 'make it glass', and it applies the tuned module plus the CSS dressing, carrying the defaults and the hard-won gotchas. Effects like this should be built once and reused as a tool, not re-derived from a tutorial every time.