Synthwave (Outrun)

"Dirigindo uma Ferrari por uma grade digital iluminada por neon à meia-noite."

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. Modo Escuro por Padrão: Fundos pretos absolutos ou roxos escuros.
2. Vetores Brilhantes de Neon: Wireframes, textos e grades em magenta, ciano e amarelo brilhantes. Uso intensivo de box-shadow e text-shadow para efeitos de brilho.
3. A Grade de Perspectiva: O elemento visual definidor é uma grade brilhante que desaparece em um ponto de fuga no horizonte.

DNA Visual

• Cores: Fundos de espaço profundo (#0B0C10, #110022). Acentos de neon brilhantes: Ciano (#00FFFF), Rosa Choque (#FF00FF), Amarelo Elétrico (#FFFF00).
• Tipografia: Texto cromado dos anos 80, script de pincel (como uma placa de neon) e fontes sans-serif em itálico pesado.
• Sombras: Sombras projetadas não são pretas; são da mesma cor do elemento, fortemente borradas, para criar emissão de luz.

Implementação Web

• Confie em text-shadow para letreiros de neon e transformações 3D para a grade do chão.
• Exemplo de CSS:

body {
  background-color: #090014;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

/* Neon Text Glow */
.synth-neon-text {
  font-family: 'Mr Dafoe', cursive; /* A classic 80s script */
  font-size: 4rem;
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #FF00FF,
    0 0 40px #FF00FF,
    0 0 80px #FF00FF;
}

/* The Perspective Grid Floor */
.synth-grid {
  position: absolute;
  bottom: 0; left: -50%;
  width: 200%; height: 50vh;
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.8) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.8) 2px, transparent 2px);
  background-size: 50px 50px;
  
  /* Create the 3D horizon effect */
  transform: perspective(500px) rotateX(60deg);
  transform-origin: top center;
  
  /* Fade out towards the horizon */
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

Implementação de Aplicativo

SwiftUI

struct NeonText: View {
    let text: String
    
    var body: some View {
        Text(text)
            .font(.custom("Mr Dafoe", size: 64))
            .foregroundColor(.white)
            // Layering shadows to create a glowing bloom
            .shadow(color: .white, radius: 2)
            .shadow(color: .pink, radius: 5)
            .shadow(color: .pink, radius: 10)
            .shadow(color: .pink, radius: 20)
    }
}

struct SynthwaveScreen: View {
    var body: some View {
        ZStack {
            Color(red: 0.03, green: 0.0, blue: 0.08).ignoresSafeArea() // #090014
            
            VStack {
                NeonText(text: "Outrun")
                Spacer()
            }
            
            // Note: A 3D perspective grid requires SceneKit or a pre-rendered image
            // Native SwiftUI 3D transforms apply to the view, but won't draw an infinite floor grid easily.
            Image("synth_grid")
                .resizable()
                .scaledToFill()
                .frame(height: 300)
                .offset(y: 200)
        }
    }
}

• Empilhe múltiplos modificadores .shadow(color:radius:) diretamente no texto para criar um efeito vibrante de "bloom" de neon.
• A grade de horizonte em wireframe 3D é melhor alcançada através de um fundo de imagem pré-renderizado.

Flutter

class NeonText extends StatelessWidget {
  final String text;
  const NeonText(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(
        fontFamily: 'Mr Dafoe', // Ou qualquer fonte cursiva dos anos 80
        fontSize: 64,
        color: Colors.white,
        shadows: [
          Shadow(color: Colors.white, blurRadius: 2),
          Shadow(color: Colors.pinkAccent, blurRadius: 5),
          Shadow(color: Colors.pinkAccent, blurRadius: 15),
          Shadow(color: Colors.pinkAccent, blurRadius: 30),
        ],
      ),
    );
  }
}

class SynthwaveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF090014),
      body: Stack(
        children: [
          // Asset de grade de fundo
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 300,

…