Webgl Neon Grid

---
name: webgl-neon-grid
description: |
  A real-time synthwave scene — a perspective floor grid scrolling toward a
  banded retro sun under a neon starfield, all from one fragment shader. No
  textures. Rendered as a single self-contained `index.html`. Use when the
  brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective
  grid", "vaporwave", or a retro-futuristic hero. OpenDesign serves this in
  powered-preview mode so the GPU stack actually runs.
triggers:
  - "synthwave"
  - "outrun"
  - "retro 80s"
  - "neon grid"
  - "perspective grid"
  - "vaporwave"
  - "retrowave"
  - "赛博"
  - "蒸汽波"
od:
  mode: prototype
  platform: web
  scenario: design
  preview:
    type: html
    entry: index.html
    reload: debounce-100
  design_system:
    requires: false
    sections: [color, typography]
  craft:
    requires: [animation-discipline]
---

# Neon Grid Skill

Produce a single self-contained `index.html` that renders a real-time synthwave scene full-screen — a perspective floor grid, a banded retro sun, and a starfield — with a clean typographic overlay on top.

## Why this is a powered artifact

OpenDesign detects `getContext('webgl2')` and renders this file in **powered preview** — a cross-origin-isolated iframe with `allow-same-origin`. The full GPU pipeline is available; you do not need to work around the opaque sandbox.

## Resource map

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

## Workflow

### Step 0 — Read the reference
Read `example.html` end to end. Note the shape: a horizon split; **above** the horizon a sky gradient, a circular sun cut by horizontal scanline bands, and hashed stars; **below** the horizon a perspective floor grid (`z = k / depth`, `x = uv.x * z`) that scrolls with time, its lines thinning and fading with distance. Everything is analytic — no raymarch needed.

### Step 1 — Choose the palette
Synthwave lives on its gradient:
- **Outrun** (default): magenta→indigo sky, orange→pink banded sun, cyan/magenta grid.
- **Vaporwave**: pastel teal + pink, softer sun, wider grid spacing.
- **Terminal**: near-monochrome green grid on black for a colder, hacker read.

### Step 2 — Build `index.html`
- One file, zero external requests. Fullscreen triangle + fragment shader.
- Project the floor with a simple perspective divide; derive grid lines from `abs(fract(gv) - 0.5)` and a distance-scaled line width so far lines don't alias.
- Fade the grid into a horizon haze and add a hot horizon band; band the sun with `sin(y * f)` cuts on its lower half.
- Compile shaders with error logging so a typo fails loudly, not silently black.

### Step 3 — Overlay + brand
- Map the accent colors to the active DESIGN.md when one is present; otherwise the outrun palette above, with the kicker in lime `#63fe13`.
- Headline ≤ 12ch plus one supporting line. Keep the horizon and sun as the hero.

### Step 4 — Self-review (P0)
- [ ] Renders continuously at ~60fps; the FPS badge updates.
- [ ] Grid reads as receding perspective and scrolls smoothly toward the horizon.
- [ ] Sun bands and horizon glow are visible; far grid lines fade without aliasing.
- [ ] Resizes crisply on window resize (no stretching / blur).
- [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.