synthwave

name	synthwave
description	Web and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun grids, and Miami Vice aesthetics.
category	Creative & Media
source	antigravity
tags	["react","ai","agent","design","image"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-it/synthwave

Synthwave (Outrun)

"Driving a Ferrari through a neon-lit digital grid at midnight."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Dark Mode by Default: Absolute pitch-black or deep purple backgrounds.
2. Neon Glowing Vectors: Bright magenta, cyan, and yellow wireframes, text, and grids. Heavy use of box-shadow and text-shadow for glow effects.
3. The Perspective Grid: The defining visual is a glowing grid that fades into a vanishing point on the horizon.

Visual DNA

• Colors: Deep space backgrounds (#0B0C10, #110022). Glowing neon accents: Cyan (#00FFFF), Hot Pink (#FF00FF), Electric Yellow (#FFFF00).
• Typography: 80s chrome text, brush script (like a neon sign), and heavy italicized sans-serifs.
• Shadows: Drop shadows are not black; they are the same color as the element, heavily blurred, to create light emission.

Web Implementation

• Rely on text-shadow for neon signs and 3D transforms for the floor grid.
• CSS Example:

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, , ) , transparent ),
    (, (, , , ) , transparent );
  :  ;
  
  
  : () ();
  : top center;
  
  
  : (to bottom, transparent , black );
  -webkit-: (to bottom, transparent , black );
}

App Implementation

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)
        }
    }
}

• Stack multiple .shadow(color:radius:) modifiers directly on the text to create a vibrant neon bloom effect.
• The 3D wireframe horizon grid is best achieved via a pre-rendered image background.

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', // Or any cursive 80s font
        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: [
          // Background grid asset
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 300,
            child: Image.asset('assets/synth_grid.png', fit: BoxFit.cover),
          ),
          // Foreground UI
          const Center(child: NeonText('Outrun')),
        ],
      ),
    );
  }
}

• TextStyle accepts a list of Shadow objects. Stack them with exponentially increasing blurRadius values (e.g., 2, 5, 15, 30) to simulate light dispersal.
• Avoid rendering the perspective grid programmatically using CustomPaint unless you want to do the 3D math manually. Use an asset.

React Native