# Vaporwave

Também chamado de: estética vaporwave, web a e s t h e t i c, adjacente ao synthwave, retrô Windows 95  
Era: origem 2011-2016 (música e arte); uso na web contínuo para portfólios, música e merch  
Página: https://designforai.dev/pt/style/vaporwave

## Traços

- gradientes de rosa para ciano, faixas de pôr do sol, grades wireframe recuando até o horizonte
- chrome do Windows 95, bustos gregos, palmeiras, golfinhos, tabuleiros de xadrez, scanlines de VHS
- katakana japonês ao lado do inglês, letter-spacing largo
- tipografia serifada ou slab com efeitos de cromo ou contorno
- texturas lo-fi: artefatos de JPEG, brilho de CRT, franjas de cor (aberração cromática)
- ironia e nostalgia; UI deliberadamente datada
- movimento lento e sonhador: gradientes que derivam, flutuação suave

Paleta: #ff71ce rosa, #01cdfe ciano, #05ffa1 menta, #b967ff roxo, #fffb96 amarelo pálido, #1a0b2e base roxo profundo

Tipografia: Major Mono Display para cabeçalhos, Cormorant Garamond ou Times para contraste clássico, IBM Plex Mono para UI; tracking largo (0.2-0.4em) nos títulos

## Faça

- use uma grade em perspectiva (repeating-linear-gradient num plano rotateX(60deg)) como chão
- combine rosa #ff71ce e ciano #01cdfe em cada gradiente; esse par é a assinatura
- adicione legendas em katakana ou japonês sob os títulos em inglês, mas mantenha-as com sentido

## Evite

- não use num site corporativo; lê como piada a menos que a marca esteja na brincadeira
- não fique nítido e moderno; adicione scanlines e leve blur para manter o lo-fi
- não confunda com cyberpunk; vaporwave é suave, pastel e lento

Conhecido por: Era da capa do Macintosh Plus, Vapor95, Poolsuite, comunidades do Neocities

## Semente CSS

```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

Construa o site em estilo vaporwave. Base #1a0b2e com um gradiente de fundo no hero de #ff71ce (topo) passando por #b967ff até #01cdfe (base) e um sol feito de faixas horizontais (repeating-linear-gradient em #ff71ce e #fffb96). Abaixo dele um chão wireframe ciano: um plano rotateX(60deg) com uma grade repetida de 40px em #01cdfe que rola lentamente em direção ao espectador (animação translateY, 4s linear infinite). Tipografia: Major Mono Display para títulos a 56px com letter-spacing 0.3em e text-shadow 0 0 20px #ff71ce; Cormorant Garamond itálico a 28px para subtítulos; IBM Plex Mono 14px para UI com legendas em katakana japonês sob cada título. Painéis estilo Windows 95: #c0c0c0 com bordas biseladas de 2px (claro no canto superior esquerdo, escuro no inferior direito) e uma barra de título em gradiente #000080 para #1084d0. Adicione um overlay de scanlines CRT a opacity 0.08 e um efeito de aberração cromática de 1px no texto do hero. Mantenha tudo lento: transições de 600ms ease.