Liquid Glass

Reusable refraction glass for components/grid-wallet-demo. Full docs: components/grid-wallet-demo/src/components/liquid-glass/README.md — read it before implementing anything non-trivial.

The rule that prevents 90% of the pain

The glass refracts its own CHILDREN, not the page behind it. There is no "frost whatever is behind me" mode (backdrop-filter can't refract portably). To bend a background you put a copy of it inside the glass. So:

• Glass over a known backdrop (color / gradient / image / pattern) → use GlassOver, which makes the copy for you.
• Glass over live UI behind a small surface (over a static screen) → achievable: feed the glass a positioned copy of that UI. See "Refract live UI behind a small surface" in the gotchas / README.
• Glass over arbitrary scrolling/animating DOM → not achievable. Tell the user.