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.