Habilidade Neon Grid

Produza um único index.html autônomo que renderiza uma cena synthwave em tempo real em tela cheia — uma grade de chão em perspectiva, um sol retrô em faixas e um campo de estrelas — com uma sobreposição tipográfica limpa por cima.

Por que este é um artefato poderoso

O OpenDesign detecta getContext('webgl2') e renderiza este arquivo em visualização poderosa — um iframe isolado entre origens com allow-same-origin. O pipeline completo da GPU está disponível; você não precisa contornar o sandbox opaco.

Mapa de recursos

webgl-neon-grid/
├── SKILL.md      ← you're reading this
└── example.html  ← a working synthwave grid + sun shader (READ FIRST)

Fluxo de trabalho

Etapa 0 — Leia a referência

Leia example.html de ponta a ponta. Observe a forma: uma divisão do horizonte; acima do horizonte, um gradiente de céu, um sol circular cortado por faixas de varredura horizontais e estrelas hachuradas; abaixo do horizonte, uma grade de chão em perspectiva (z = k / depth, x = uv.x * z) que rola com o tempo, suas linhas afinando e desaparecendo com a distância. Tudo é analítico — sem necessidade de raymarch.

Etapa 1 — Escolha a paleta

Synthwave vive em seu gradiente:

• Outrun (padrão): céu magenta→índigo, sol em faixas laranja→rosa, grade ciano/magenta.
• Vaporwave: verde-azulado pastel + rosa, sol mais suave, espaçamento de grade mais amplo.
• Terminal: grade verde quase monocromática sobre preto para uma leitura mais fria e hacker.

Etapa 2 — Construa index.html

• Um arquivo, zero requisições externas. Triângulo em tela cheia + shader de fragmento.
• Projete o chão com uma divisão de perspectiva simples; derive as linhas da grade de abs(fract(gv) - 0.5) e uma largura de linha escalada pela distância para que as linhas distantes não aliassem.
• Fade a grade em uma névoa do horizonte e adicione uma faixa quente do horizonte; divida o sol com cortes sin(y * f) em sua metade inferior.
• Compile os shaders com log de erros para que um erro de digitação falhe ruidosamente, não silenciosamente em preto.

Etapa 3 — Sobreposição + marca

• Mapeie as cores de destaque para o DESIGN.md ativo quando um estiver presente; caso contrário, a paleta outrun acima, com o kicker em verde limão #63fe13.
• Título ≤ 12 caracteres mais uma linha de suporte. Mantenha o horizonte e o sol como o destaque.

Etapa 4 — Auto-revisão (P0)

• Renderiza continuamente a ~60fps; o badge de FPS é atualizado.
• A grade é lida como perspectiva recuando e rola suavemente em direção ao horizonte.
• As faixas do sol e o brilho do horizonte são visíveis; as linhas da grade distantes desaparecem sem aliasing.
• Redimensiona de forma nítida ao redimensionar a janela (sem esticar / borrar).
• Degrada para uma mensagem (não uma página em branco) se webgl2 estiver indisponível.