Aurora UI
Gradientes fluxo animado, efeito Northern Lights, cores complementares. Interface luminosa e atmosférica. Prompt para gradientes dinâmicos.
Uso: SaaS premium, Creative tools, Agência moderna, Brand exclusiva
Contexto Histórico
Mesh gradients (2021+) e CSS Houdini trazem animações fluidas tipo Northern Lights. Popular em SaaS premium e creative tools.
Quando Usar
Aurora gradients signal premium when they're contextual — a hero section breathing slowly, a card edge catching light on hover. They work for SaaS products charging $50+/month, creative tools that need to feel alive, and brands positioning against boring enterprise competitors. They fail spectacularly when slapped on everything. If your gradient doesn't serve hierarchy or mood, it's decoration cosplaying as design. Skip it for content-heavy pages, dashboards, or anything where the user needs to focus. One aurora moment per viewport. That's the rule.
Princípios de Design
- Slow beats fast — animation cycles under 6 seconds feel anxious; aim for 8-15 second loops that breathe rather than pulse
- Limit your palette to 3-4 colors maximum per mesh; more creates mud, not magic
- Anchor gradients to layout purpose — backgrounds establish mood, edge glows create depth, never both simultaneously
- Performance is non-negotiable: use CSS @property animations over JavaScript, will-change sparingly, and kill animations outside viewport with IntersectionObserver
- Contrast accessibility first — ensure text over gradients maintains WCAG AA minimum by testing against the lightest point in the animation cycle, not just the static frame
Especificações Técnicas
Cores
Primárias
Efeitos
Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
Light/Dark
✓ Full / ✓ Full
Relacionados
Última sincronização: 01/04/2026