Liquid Glass · Technique Comparison
Two Implementations,
One Effect
The original open-source demo on the left; our adapted, animated, component-ready version for Densify on the right.
Original Demo
Noise type
fractalNoise (static)
baseFrequency
0.008 · fixed
Displacement scale
77 px · aggressive
Button filter
Baked PNG bump map
White tint
::before bg rgba(255,255,255,.10)
Background
Animated photo (60 s CSS)
Shape target
Circle · 70 × 70 px
Integration
Standalone CSS class
Densify Implementation
40min
Por treino
+4kg
Média em 3 meses
3.9k
kcal/dia
Noise type
fractalNoise (animated)
baseFrequency
0.006–0.011 · 18 s morph
Displacement scale
40 px · refined
Button filter
Same fractalNoise, no PNG
White tint
bg-white/18 on element
Background
CSS gradient orbs
Shape target
Pill · rounded-2xl / full
Integration
.densify-lg Tailwind class
Technical Breakdown
Property-by-property diff
| Property | Original | Densify |
|---|---|---|
| Glass distortion noise | Static feTurbulence · seed 92 | Animated feTurbulence · SVG <animate> breathes every 18 s |
| Displacement scale | 77 px — highly visible warp | 40 px — subtle, brand-appropriate |
| Button/pill filter | Separate baked PNG bump map (feImage) | Same fractalNoise filter — single source of truth |
| Background material | External photo via CSS background-image | Self-contained CSS gradient orbs (no network) |
| Background animation | CSS @keyframes moves photo 0 → -1000% | Framer Motion scroll parallax on the orbs |
| Shine ring | inset box-shadow on ::before (z:0) | inset box-shadow on ::before (z:2, above Framer Motion layers) |
| Reusability / DX | Copy-paste .glassContainer + .glassBtn per element | Add densify-lg class to any element — one line |
| Motion compatibility | No JS animation framework | Works alongside Framer Motion (float + scale + hover) |
| Isolation / stacking | isolation: isolate per element | isolation: isolate baked into .densify-lg |
| Browser support | Chrome · Safari · Edge (Firefox partial) | Same — identical CSS/SVG surface |
✦
Animated Texture
SVG <animate> on baseFrequency makes the glass slowly morph — the original demo never moves the noise, only the background.
◈
Single CSS Class
.densify-lg encapsulates ::before, ::after, isolation, and z-index. Apply to any element in one className attribute.
⬡
Framer Motion Ready
Works with scale, rotate, y-translate, and AnimatePresence with no z-index conflicts — stacking fully resolved.