Foundations
Foundations
Liquid material
Adaptive, refractive surfaces inspired by 2026 Liquid Glass — CSS meta-materials with pointer-driven speculars, chromatic edges, and tint recipes. Product-safe: solid fallbacks on lite bandwidth and reduced transparency.
Approximation, not physics
Interactive playground
Move pointer over panels — specular follows light
Adaptive panel
Refractive chrome
Tints shift with recipe. Specular and caustics follow your pointer. Lite mode collapses to solid card automatically.
Orb + slab
Same tint system
Material layers
01
Specular
Highlight that tracks --liquid-x / --liquid-y (pointer)
02
Adaptive tint
Primary / hot / chart washes via data-liquid-tint
03
Frost base
backdrop-filter blur + saturate over controlled stage
04
Chromatic fringe
::before gradient edge — refractive border
05
Caustics
::after soft-light smears offset from specular
Tint recipes
Tokens
| Token | Role |
|---|---|
| --liquid-x / --liquid-y | Specular origin (%, pointer-driven) |
| --liquid-blur | 22px default frost |
| --liquid-saturate | 1.55 backdrop chroma boost |
| --liquid-tint-a/b/c | Adaptive color washes |
| --liquid-specular | Highlight intensity |
| --liquid-fringe-a/b/c | Chromatic edge colors |
| --liquid-base | Underlying frosted fill |
| --liquid-depth | Inset highlight + outer glow |
Implementation
Import from @/components/ui/liquid
Do
- Use LiquidStage or controlled mesh behind every liquid panel
- Reserve full liquid materials for heroes, FABs clusters, and premium chrome
- Keep body reading text on solid cards when density is high
- Respect lite bandwidth and prefers-reduced-transparency (auto solid)
Don’t
- Claim true optical refraction — this is a CSS meta-material approximation
- Animate blur radius continuously
- Stack liquid panels three-deep
- Track pointer without reduced-motion guard (hook handles this)
Stack with Glass