# Synthwave / Retro Futurism Aesthetic

The 80s meets sci-fi. Neon grids, chrome text, sunset gradients, and VHS nostalgia. This style dominates gaming, crypto, music, and entertainment verticals.

## Critical Self-Assessment

**Why this deserves a template:**
- ✅ Highly distinctive visual language (instantly recognizable)
- ✅ Massive use case coverage (gaming, crypto, music, nightlife, tech)
- ✅ Trending hard in 2024-2025 (Gen Z nostalgia cycle)
- ✅ Fully achievable in Remotion (no 3D dependencies)
- ✅ Clear, codifiable patterns

**When NOT to use:**
- Corporate B2B (too playful)
- Healthcare/finance (too edgy)
- Minimal/luxury brands (too busy)

---

## Core Visual Elements

### 1. The Neon Grid Floor
The signature element. A perspective grid receding to the horizon.

```tsx
// Perspective grid pattern
const GridFloor = ({ frame }: { frame: number }) => {
  const scrollSpeed = frame * 2; // Grid moves toward viewer
  
  return (
    <div style={{
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: '50%',
      background: `
        linear-gradient(to bottom, transparent 0%, #0a0a0a 100%),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 79px,
          #ff00ff33 79px,
          #ff00ff33 80px
        ),
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent ${79 - (scrollSpeed % 80)}px,
          #00ffff33 ${79 - (scrollSpeed % 80)}px,
          #00ffff33 ${80 - (scrollSpeed % 80)}px
        )
      `,
      transform: 'perspective(500px) rotateX(60deg)',
      transformOrigin: 'bottom center',
    }} />
  );
};
```

### 2. Sunset Gradient Sky
The classic pink-to-purple-to-dark gradient.

```tsx
const SynthwaveSky = () => (
  <div style={{
    position: 'absolute',
    inset: 0,
    background: `linear-gradient(
      to bottom,
      #0a0a0a 0%,
      #1a0a2e 20%,
      #4a1c6b 40%,
      #d4418e 60%,
      #ff6b6b 75%,
      #feca57 90%,
      #ff9f43 100%
    )`,
  }} />
);
```

### 3. Chrome / Metallic Text
Gradient text with metallic sheen effect.

```tsx
const ChromeText = ({ children }: { children: string }) => (
  <h1 style={{
    fontFamily: "'Orbitron', 'Audiowide', sans-serif",
    fontSize: 120,
    fontWeight: 900,
    letterSpacing: '0.05em',
    textTransform: 'uppercase',
    background: `linear-gradient(
      180deg,
      #ffffff 0%,
      #a8a8a8 25%,
      #ffffff 50%,
      #6b6b6b 75%,
      #ffffff 100%
    )`,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    filter: 'drop-shadow(0 0 20px #ff00ff) drop-shadow(0 0 40px #00ffff)',
  }}>
    {children}
  </h1>
);
```

### 4. Neon Glow Text
Text with multi-layered neon glow.

```tsx
const NeonText = ({ 
  children, 
  color = '#ff00ff' 
}: { 
  children: string; 
  color?: string;
}) => (
  <span style={{
    color: '#ffffff',
    fontFamily: "'Orbitron', sans-serif",
    fontSize: 80,
    fontWeight: 700,
    textShadow: `
      0 0 5px ${color},
      0 0 10px ${color},
      0 0 20px ${color},
      0 0 40px ${color},
      0 0 80px ${color}
    `,
  }}>
    {children}
  </span>
);
```

### 5. Sun/Circle Element
The iconic striped sun on the horizon.

```tsx
const RetroSun = ({ frame }: { frame: number }) => {
  const stripes = 8;
  const pulse = 1 + Math.sin(frame * 0.05) * 0.02;
  
  return (
    <div style={{
      position: 'absolute',
      bottom: '30%',
      left: '50%',
      transform: `translateX(-50%) scale(${pulse})`,
      width: 400,
      height: 400,
      borderRadius: '50%',
      background: `linear-gradient(
        to bottom,
        #feca57 0%,
        #ff6b6b 40%,
        #d4418e 70%,
        #4a1c6b 100%
      )`,
      // Horizontal stripes cut through
      clipPath: `polygon(
        0 0, 100% 0, 100% 10%, 0 10%,
        0 20%, 100% 20%, 100% 30%, 0 30%,
        0 40%, 100% 40%, 100% 50%, 0 50%,
        0 100%, 100% 100%
      )`,
      filter: 'drop-shadow(0 0 30px #ff6b6b)',
    }} />
  );
};
```

---

## Color Palette

| Name | Hex | Usage |
|------|-----|-------|
| Hot Pink | #ff00ff | Primary neon, glows |
| Cyan | #00ffff | Secondary neon, accents |
| Sunset Orange | #ff9f43 | Warm highlights |
| Sunset Pink | #ff6b6b | Mid-tones |
| Deep Purple | #4a1c6b | Background mid |
| Void Black | #0a0a0a | Background base |
| Chrome White | #ffffff | Text base |
| Chrome Gray | #a8a8a8 | Text gradient |

**Neon Color Combos:**
- Classic: Hot Pink (#ff00ff) + Cyan (#00ffff)
- Warm: Hot Pink (#ff00ff) + Orange (#ff6b00)
- Cool: Cyan (#00ffff) + Blue (#0066ff)

---

## Typography

**Font Families:**
- Headlines: Orbitron, Audiowide, Oxanium (geometric, futuristic)
- Body: Rajdhani, Exo 2, Michroma
- Accents: Press Start 2P (pixel style for gaming)

**Style Rules:**
- ALL CAPS for headlines
- Wide letter-spacing (0.05-0.15em)
- Heavy weights (700-900)
- Neon glow is mandatory on key text

---

## Animation Patterns

### Grid Scroll
Grid lines move toward viewer, creating infinite depth.

```tsx
const gridOffset = frame * 2; // Adjust speed
// Use modulo for seamless loop
const yOffset = gridOffset % gridCellSize;
```

### Neon Flicker
Subtle brightness variation mimics real neon.

```tsx
const flicker = 0.8 + Math.random() * 0.4; // 0.8-1.2
const glowIntensity = 40 * flicker;
```

### Sun Pulse
Gentle breathing animation on the sun.

```tsx
const pulse = 1 + Math.sin(frame * 0.05) * 0.03;
transform: `scale(${pulse})`;
```

### Scan Lines (VHS Effect)
Horizontal lines moving down the screen.

```tsx
const ScanLines = ({ frame }: { frame: number }) => (
  <div style={{
    position: 'absolute',
    inset: 0,
    background: `repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    )`,
    transform: `translateY(${frame % 4}px)`,
    pointerEvents: 'none',
  }} />
);
```

---

## Scene Composition

**Typical Layout (Portrait 1080x1920):**
```
┌────────────────────┐
│   Dark void sky    │  ← #0a0a0a to #1a0a2e
│                    │
│   [CHROME TEXT]    │  ← Metallic gradient + glow
│                    │
│      ◐ SUN ◐       │  ← Striped sun element
│                    │
│ ═══════════════════│  ← Horizon line (optional)
│     GRID FLOOR     │  ← Perspective neon grid
│   ↓ scrolling ↓    │
└────────────────────┘
```

---

## Audio Pairing

- **Music:** Synthwave, retrowave, outrun (80-120 BPM)
- **SFX:** Retro synth stabs, laser sounds, arcade beeps
- **Voiceover:** Processed, slight reverb, confident tone

---

## SORA Prompt Examples

```
Synthwave sunset landscape, neon pink and cyan grid floor extending 
to horizon, giant striped sun, palm tree silhouettes, 80s retro 
futuristic aesthetic, VHS grain, cinematic, 4K
```

```
Chrome metallic text floating in void, hot pink and cyan neon glow,
perspective grid floor, synthwave aesthetic, dark background with 
sunset gradient on horizon
```

---

*Reference: Outrun game aesthetic, Kavinsky album art, Stranger Things titles, Far Cry Blood Dragon*
