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/mag…
