Liquid Glass
Liquid Glass — Design general com flowing glass, morphing, smooth transitions. Template e prompt pronto para IA.
Uso: Landing pages, SaaS
Contexto Histórico
Estilo Liquid Glass representa uma tendência moderna em design UI/UX web com foco em general.
Quando Usar
Liquid glass earns its render cost when the product itself is about craft, premium positioning, or creative expression. SaaS dashboards where users spend hours? Skip it — they'll notice the GPU fan before the aesthetics. But a brand site that needs to communicate sophistication in three seconds? A portfolio that should feel alive? A luxury product page where the interface IS the experience? That's where fluid glass justifies every dropped frame. The rule is simple: if the motion serves the brand story, ship it. If it's decoration on top of utility, you're burning battery for ego.
Princípios de Design
- Motion follows intent — glass morphs in response to user interaction or scroll position, never autonomously looping without purpose
- Performance budget is non-negotiable — cap fluid effects at 2-3 simultaneous animated layers; composite on GPU, never trigger layout
- Iridescence is seasoning, not the meal — color shifts should be subtle enough that users feel them before they consciously notice them
- Organic shapes need mathematical backbone — use eased sine curves and golden-ratio proportions so fluid forms feel natural rather than random
- Degrade gracefully to static glass — every liquid effect must have a prefers-reduced-motion fallback that preserves hierarchy without animation
Especificações Técnicas
Cores
Efeitos
Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions
Light/Dark
✓ Full / ✓ Full
Relacionados
Última sincronização: 01/04/2026