webgl-neon-grid

Generate a real-time synthwave neon grid scene using a single self-contained fragment shader.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #GPU #generative #shader #synthwave #webGL #NEON

One-click install

npx skills add https://github.com/nexu-io/open-design --skill webgl-neon-grid

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: webgl-neon-grid
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-neon-grid
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-neon-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of creating high-performance, visually immersive retro-futuristic backgrounds without the overhead of external assets or complex 3D engines.

Core Features & Use Cases

GPU-Accelerated Rendering: Utilizes WebGL2 fragment shaders to render complex visual effects at 60fps.
Self-Contained Output: Produces a single, portable index.html file that requires no external textures or dependencies.
Use Case: Ideal for creating hero sections, landing page backgrounds, or design prototypes that require a 'synthwave', 'vaporwave', or 'retro 80s' aesthetic.

Quick Start

Generate a synthwave neon grid scene as a single index.html file with a perspective floor and banded sun.

Frequently Asked Questions about webgl-neon-grid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a synthwave grid background?▼

Use the webgl-neon-grid skill to generate a self-contained index.html file. The skill uses a fragment shader to render a perspective floor grid, a banded sun, and a starfield in real-time.

Does this skill require external image textures?▼

No, this skill is entirely procedural. It uses a single fragment shader to calculate all visual elements, including the grid, sun, and stars, ensuring zero external dependencies.

Can I customize the colors of the neon grid?▼

Yes, the shader code allows for palette adjustments. You can modify the color vectors in the fragment shader to switch between 'Outrun', 'Vaporwave', or 'Terminal' color schemes.

Why is my browser showing a black screen?▼

A black screen usually indicates that WebGL2 is not supported or is disabled in your browser. Ensure your hardware acceleration is enabled and your browser supports the WebGL2 API.