webgl-neon-grid

# 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.