# Webgl Neon Grid

> A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under…

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.

- Page: https://ss33.ai/skills/nexu-io/webgl-neon-grid-93781710075
- Publisher: nexu-io
- Category: [Creative & Media](https://ss33.ai/skills/category/creative-and-media-0j3x01) › [3D](https://ss33.ai/skills/category/creative-and-media-0j3x01/3d-qi7csu)
- License: Apache-2.0
- Source: https://github.com/nexu-io/open-design/blob/78d5637cb49da07e81314d1544b5fc6d37c95084/plugins/_official/examples/webgl-neon-grid/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/nexu-io/webgl-neon-grid-93781710075

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