Apple „liquid glass" akcent na webu — sklo, které pozadí u hran láme, ne jen rozmazává. Čistě SVG + CSS, bez WebGL a bez Reactu.
Hrany ohýbají pruhy za sklem — to je ta refrakce.
backdrop-filterDisplacement mapa (rounded-rect SDF) se předpočítá jednou a vloží jako obrázek do
feImage; feDisplacementMap jí ohne pozadí za sklem. Mapa je
per-velikost — každý prvek (nav / karta / tlačítko) má vlastní mapu i
scale. Pozadí musí být barevné; nad bílou je efekt neviditelný.
Podpora: refrakce je Chromium-only. V Safari a Firefoxu
se díky dvojité deklaraci backdrop-filter prvek nerozbije — spadne na čisté
frosted sklo (jen rozmazání). To je záměr.
Generováno skillem liquid-glass-web. ·
Technika převzata z shuding/liquid-glass
(MIT) a rdev/liquid-glass-react.