Cyberpunk UI

"Alta tecnologia, vida baixa. Placas de neon cortando a névoa de uma megacidade distópica."

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. Neon sobre Preto: A base é o preto absoluto (#000000) ou carvão profundo, cortado por detalhes em neon intensamente brilhantes.
2. Geometrias Angulares: Cantos cortados (chanfros) em vez de cantos arredondados. Elementos de UI frequentemente parecem ter sido cortados de placas de metal.
3. Glitch e Dados: Fluxos aleatórios de dados hexadecimais, detalhes de código de barras e distorções visuais intencionais.

DNA Visual

• Cores: Amarelo Ácido (#FCE205), Ciano (#00FFFF), Rosa Choque (#FF003C), contra Preto.
• Tipografia: Fontes industriais, quadradas sem serifa (como Rajdhani, Blender Pro, ou Teko), misturadas com fontes monoespaçadas pequenas para dados.
• Estilização: Listras diagonais, padrões de fita de aviso e brilhos externos pesados.

Implementação Web

• Confie em clip-path para os cortes angulares.
• Exemplo de CSS:

body {
  background-color: #050505;
  color: #00FFFF;
  font-family: 'Rajdhani', sans-serif;
  background-image: repeating-linear-gradient(
    45deg,
    #050505,
    #050505 10px,
    #0a0a0a 10px,
    #0a0a0a 20px
  );
}

.cyberpunk-button {
  background-color: #FF003C; /* Cyberpunk Red/Pink */
  color: #FFF;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  padding: 16px 32px;
  
  /* The signature clipped corner */
  clip-path: polygon(
    0 0, 
    calc(100% - 15px) 0, 
    100% 15px, 
    100% 100%, 
    15px 100%, 
    0 calc(100% - 15px)
  );
  
  position: relative;
  transition: all 0.2s ease;
}

/* The glitch/shadow effect */
.cyberpunk-button:hover {
  background-color: #FCE205; /* Acid Yellow */
  color: #000;
  box-shadow: 
    -4px 0 0 #00FFFF,
    4px 0 0 #FF003C;
}

.data-stream {
  font-family: monospace;
  font-size: 0.8rem;
  color: rgba(0, 255, 255, 0.5);
}

Implementação de Aplicativo

SwiftUI

struct CyberpunkShape: Shape {
    let cutSize: CGFloat = 15
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // Top left
        path.move(to: CGPoint(x: 0, y: 0))
        // Top right (cut)
        path.addLine(to: CGPoint(x: rect.maxX - cutSize, y: 0))
        path.addLine(to: CGPoint(x: rect.maxX, y: cutSize))
        // Bottom right
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // Bottom left (cut)
        path.addLine(to: CGPoint(x: cutSize, y: rect.maxY))
        path.addLine(to: CGPoint(x: 0, y: rect.maxY - cutSize))
        path.closeSubpath()
        return path
    }
}

struct CyberButton: View {
    var body: some View {
        Button(action: {}) {
            Text("SYS.OVERRIDE")
                .font(.custom("Rajdhani", size: 24))
                .fontWeight(.bold)
                .foregroundColor(.white)
                .padding(.horizontal, 32)
                .padding(.vertical, 16)
        }
        .background(Color(red: 1.0, green: 0.0, blue: 0.24)) // Cyberpunk Red
        .clipShape(CyberpunkShape())
        .overlay(
            CyberpunkShape()
                .stroke(Color(red: 0.0, green: 1.0, blue: 1.0), lineWidth: 2) // Cyan border
        )
    }
}

• Defina um Shape personalizado que corta fisicamente os cantos, contornando o cornerRadius padrão.
• Use .clipShape() para o fundo e .overlay() com .stroke() para bordas de alta tecnologia.

Flutter

class CyberpunkClipper extends CustomClipper<Path> {
  final double cutSize = 15.0;

  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width - cutSize, 0); // Início do corte superior direito
    path.lineTo(size.width, cutSize);     // Fim do corte superior direito
    path.lineTo(size.width, size.height);
    path.lineTo(cutSize, size.height);    // Início do corte inferior esquerdo
    path.lineTo(0, size.height - cutSize);// Fim do corte inferior esquerdo
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class CyberButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CyberpunkClipper(),
      child: Container(
        color: const Color(0xFFFF003C), // Vermelho Cyberpunk
        padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
        child: const Text(
          'SYS.OVERRIDE',

…