Aurora UI

"Luzes etéreas e mutáveis. Como a Aurora Boreal presa sob um vidro fosco."

Quando Usar

Use este subestilo quando o pedido do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Esferas de Cor Borradas: Grandes manchas de cor fora de foco e altamente saturadas flutuando no fundo.
2. Sobreposições de Vidro: Elementos em primeiro plano são frequentemente semitransparentes (glassmorfismo) para deixar o efeito da aurora brilhar.
3. Movimento Fluido: As esferas de cor de fundo devem derivar, expandir e contrair lentamente.

DNA Visual

• Cores: Requer fundos escuros e profundos com acentos vibrantes e luminosos. Midnight Luxury ou Yacht Club (modificado para modo escuro) funcionam bem, injetando ciano brilhante, magenta ou verde limão como as esferas brilhantes.
• Tipografia: Fontes sans-serif finas e elegantes ou fontes serifadas sofisticadas. Texto branco de alto contraste.
• Layout: Mantenha os elementos da UI em primeiro plano mínimos para que o fundo continue sendo a estrela.

Implementação Web

• Melhor alcançado com div posicionados absolutamente e fortemente borrados atrás do conteúdo principal.
• Exemplo de CSS:

body {
  background-color: #0A0A0A;
  overflow-x: hidden;
  position: relative;
}

/* The Glowing Orb */
.aurora-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(181,154,95,0.8) 0%, rgba(181,154,95,0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  animation: float 20s infinite ease-in-out alternate;
}

.aurora-blob.blue {
  background: radial-gradient(circle, rgba(92,107,115,0.8) 0%, rgba(0,0,0,0) 70%);
  top: 20%;
  left: 60%;
  animation-delay: -5s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 100px) scale(1.2); }
  100% { transform: translate(100px, -50px) scale(0.9); }
}

/* Foreground content should be glassmorphic */
.aurora-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
}

Implementação de Aplicativo

SwiftUI

struct AuroraView: View {
    @State private var animate = false
    
    var body: some View {
        ZStack {
            // Dark background
            Color.black.ignoresSafeArea()
            
            // Animated Orbs
            Circle()
                .fill(Color(red: 0.71, green: 0.60, blue: 0.37)) // #B59A5F
                .blur(radius: 80)
                .frame(width: 300, height: 300)
                .offset(x: animate ? -50 : 50, y: animate ? -100 : 0)
            
            Circle()
                .fill(Color(red: 0.36, green: 0.42, blue: 0.45)) // #5C6B73
                .blur(radius: 80)
                .frame(width: 300, height: 300)
                .offset(x: animate ? 100 : -50, y: animate ? 100 : -50)
            
            // Glassy Foreground content
            VStack {
                Text("Aurora Interface")
                    .font(.largeTitle.bold())
                    .foregroundColor(.white)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.ultraThinMaterial)
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 10).repeatForever(autoreverses: true)) {
                animate = true
            }
        }
    }
}

• Use Circle().blur(radius: 80...120) em um ZStack abaixo do conteúdo principal.
• Anime o .offset() com um duration (10-20 seconds) muito longo.
• Use .background(.ultraThinMaterial) em contêineres em primeiro plano para deixar a luz colorida transparecer bem.

Flutter

import 'dart:ui';

class AuroraView extends StatefulWidget {
  @override
  State<AuroraView> createState() => _AuroraViewState();
}

class _AuroraViewState extends State<AuroraView> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 10))..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // Orb animado
          AnimatedBuilder(
            animation: _controller,

…