# Vaporwave

Auch bekannt als: Vaporwave-Ästhetik, a e s t h e t i c Web, Synthwave-nah, Windows-95-Retro  
Ära: Ursprung 2011-2016 (Musik und Kunst); Web-Nutzung anhaltend für Portfolios, Musik und Merch  
Seite: https://designforai.dev/de/style/vaporwave

## Merkmale

- Pink-zu-Cyan-Verläufe, Sonnenuntergangsbänder, Wireframe-Raster, die zum Horizont laufen
- Windows-95-Chrome, griechische Büsten, Palmen, Delfine, Schachbrettmuster, VHS-Scanlines
- japanische Katakana neben Englisch, weites Letter-Spacing
- Serif- oder Slab-Schrift mit Chrom- oder Outline-Effekten
- Lo-Fi-Texturen: JPEG-Artefakte, CRT-Glow, Farbsäume (chromatische Aberration)
- Ironie und Nostalgie; absichtlich veraltetes UI
- langsame, verträumte Motion: driftende Verläufe, sanftes Schweben

Palette: #ff71ce Pink, #01cdfe Cyan, #05ffa1 Mint, #b967ff Violett, #fffb96 Blassgelb, #1a0b2e tiefviolette Basis

Schrift: Major Mono Display für Header, Cormorant Garamond oder Times als klassischer Kontrast, IBM Plex Mono für UI; weites Tracking (0.2-0.4em) auf Titeln

## Do

- nutze ein Perspektivraster (repeating-linear-gradient auf einer rotateX(60deg)-Ebene) als Boden
- kombiniere Pink #ff71ce und Cyan #01cdfe in jedem Verlauf; dieses Paar ist die Signatur
- ergänze Katakana oder japanische Untertitel unter englischen Überschriften, aber halte sie sinnvoll

## Don't

- nutze es nicht für eine Business-Seite; es wirkt wie ein Witz, außer die Marke ist eingeweiht
- werde nicht scharf und modern; ergänze Scanlines und leichten Blur, damit es Lo-Fi bleibt
- verwechsle es nicht mit Cyberpunk; Vaporwave ist weich, pastellig und langsam

Bekannt dafür: Albumcover-Ära von Macintosh Plus, Vapor95, Poolsuite, Neocities-Communities

## CSS-Seed

```css
:root{--bg:#1a0b2e; --fg:#fffb96; --accent:#ff71ce; --accent2:#01cdfe; --accent3:#05ffa1; --radius:0; --glow:0 0 20px #ff71ce; --font:'Major Mono Display',monospace}
```

## Prompt

Baue die Seite im Vaporwave-Stil. Basis #1a0b2e mit einem Hero-Hintergrundverlauf von #ff71ce (oben) über #b967ff nach #01cdfe (unten) und einer Sonne aus horizontalen Bändern (repeating-linear-gradient in #ff71ce und #fffb96). Darunter ein cyanfarbener Wireframe-Boden: eine rotateX(60deg)-Ebene mit einem 40px Wiederholraster in #01cdfe, das langsam auf den Betrachter zuscrollt (translateY-Animation, 4s linear infinite). Schrift: Major Mono Display für Überschriften bei 56px mit 0.3em letter-spacing und text-shadow 0 0 20px #ff71ce; Cormorant Garamond kursiv bei 28px für Zwischenüberschriften; IBM Plex Mono 14px für UI mit japanischen Katakana-Untertiteln unter jeder Überschrift. Windows-95-artige Panels: #c0c0c0 mit 2px Bevel-Rändern (hell oben links, dunkel unten rechts) und einem Titelleistenverlauf von #000080 nach #1084d0. Ergänze ein CRT-Scanline-Overlay bei opacity 0.08 und einen 1px Chromatische-Aberration-Texteffekt im Hero. Halte alles langsam: 600ms ease Transitions.