A WebGL stripe shader and a set of pure-CSS metal reflections — two ways to fake liquid metal on the web.
Both driven by the LiquidMetal shader from @paper-design/shaders-react — a flowing stripe pattern with RGB channel dispersion, distorted along the shape's edges.
No canvas, no shader — just animated @property custom properties driving conic and linear gradients, blurred and contrast-boosted into a metallic sheen.
The same shader and CSS-reflection techniques from above, re-tinted from chrome to a brushed brass finish — swapping colorTint on the shader and warming the gradient stops on the pure-CSS variants.
A real backdrop-filter: blur() pane, not a shader — the chromatic rim is a masked gradient border, and the sparkle glyph is a CSS mask with an animated hue-rotate filter.
Same pane as 04, but alive — the icon ring is now the LiquidMetal shader from 01 instead of a static gradient, the sparkle cycles a full hue rotation, and the chromatic rim sweeps around the pill on a loop.