Design de Interface Sci-Fi (HUD)

"Display de Informações. Tático, preciso e altamente analítico."

Quando Usar

Use este subestilo quando a solicitação 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. Wireframe e Contornos: Interfaces são construídas quase inteiramente com traços finos em vez de caixas sólidas preenchidas.
2. Arrays Circulares e Radares: Uso intenso de círculos concêntricos, varreduras de radar e barras de progresso curvas.
3. Monocromático + Alerta: Frequentemente totalmente monocromático (apenas azul ou apenas verde) com uma cor secundária (vermelho) usada exclusivamente para alertas.

DNA Visual

• Cores: Fundo meia-noite. A interface é pura Ciano, Verde Esmeralda ou Âmbar (como monitores monocromáticos clássicos). Ardósia Minimalista funciona se for escuro.
• Tipografia: Fontes monospace estritas e técnicas (Share Tech Mono, VT323, Space Mono). Tudo em maiúsculas.
• Estilização: Pequenos detalhes de cromo na interface (colchetes de alvo [ ], linhas de enquadramento, coordenadas de pixel precisas).

Implementação Web

• Uso intensivo de SVG para mostradores circulares e bordas CSS para o layout.
• Exemplo de CSS:

body {
  background-color: #000b18; /* Deep space navy */
  color: #4df; /* Holographic cyan */
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
}

/* The HUD Frame */
.hud-container {
  border: 1px solid rgba(68, 221, 255, 0.3);
  position: relative;
  padding: 30px;
}

/* Corner brackets */
.hud-container::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: 20px; height: 20px;
  border-top: 2px solid #4df;
  border-left: 2px solid #4df;
}
.hud-container::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 20px; height: 20px;
  border-bottom: 2px solid #4df;
  border-right: 2px solid #4df;
}

.hud-value {
  font-size: 3rem;
  text-shadow: 0 0 10px rgba(68, 221, 255, 0.8);
}

.hud-warning {
  color: #ff3333;
  text-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

Implementação de Aplicativo

SwiftUI

struct SciFiHUDView: View {
    @State private var bootUp = false
    
    var body: some View {
        ZStack {
            Color(hex: "000b18").ignoresSafeArea() // Deep space navy
            
            VStack {
                // Circular Radar/Dial
                ZStack {
                    Circle()
                        .stroke(Color(hex: "4df").opacity(0.3), lineWidth: 1)
                    
                    Circle()
                        .trim(from: 0.0, to: bootUp ? 0.75 : 0.0)
                        .stroke(Color(hex: "4df"), style: StrokeStyle(lineWidth: 4, lineCap: .round))
                        .rotationEffect(.degrees(-90))
                    
                    Text("SYS.OK")
                        .font(.custom("Space Mono", size: 24))
                        .foregroundColor(Color(hex: "4df"))
                        .shadow(color: Color(hex: "4df"), radius: 5)
                }
                .frame(width: 200, height: 200)
                .padding(.bottom, 40)
                
                // HUD Data Frame
                HStack {
                    Text("COORD: 45.22, 12.8")
                    Spacer()
                    Text("[ LOCK ]")
                }
                .font(.custom("Space Mono", size: 16))
                .foregroundColor(Color(hex: "4df"))
                .padding()
                .border(Color(hex: "4df").opacity(0.5), width: 1)
                .overlay(
                    // Corner bracket accents
                    Path { path in
                        path.move(to: CGPoint(x: 0, y: 15)); path.addLine(to: CGPoint(x: 0, y: 0)); path.addLine(to: CGPoint(x: 15, y: 0))
                        path.move(to: CGPoint(x: 300, y: 15)); path.addLine(to: CGPoint(x: 300, y: 0)); path.addLine(to: CGPoint(x: 285, y: 0))
                    }
                    .stroke(Color(hex: "4df"), lineWidth: 2)
                )
            }
            .padding()
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 2.0)) { bootUp = true }
        }
    }
}

• SwiftUI é excepcionalmente fantástico para HUDs Sci-Fi. Circle().trim(from: to:) permite criar anéis de progresso circulares complexos e com varredura.
• Use sobreposições Path para desenhar os colchetes de canto exatos de 90 graus ([ ]) que definem o visual do HUD.

Flutter

…