Agent skill · design visual · nexu-io
webgl-neon-grid
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.
Why this skill is useful
Provides a unique fragment shader implementation for creating a synthwave scene that the AI wouldn't generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/webgl-neon-grid