Webgl neon grid
Skill nexu-io/open-design/plugins/_official/examples/webgl-neon-grid
🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill webgl-neon-gridAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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. Open Design serves this in powered-preview mode so the GPU stack actually runs.
SKILL.md
3.3 KB, as published. Nobody here has run it
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
Open Design 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
webgl2is unavailable.