webgl-experience
A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. Open Design serves this in powered-preview mode so the GPU stack actually runs.
Profile →npx skills add nexu-io/open-design --skill webgl-experience --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# WebGL Experience Skill Produce a single self-contained `index.html` that renders a real-time WebGL (or WebGL2) visual full-screen, with a clean typographic overlay on top. ## Why this is a powered artifact Open Design detects `getContext('webgl2')` / `new Worker` / `SharedArrayBuffer` and renders this file in **powered preview** — a cross-origin-isolated iframe with `allow-same-origin`. That means real Web Workers, `SharedArrayBuffer`, WASM, and the full GPU pipeline are available. You do **not** need to work around the opaque sandbox. Prefer `webgl2` for modern features; fall back to `webgl` when the effect allows. ## Resource map ``` webgl-experience/ ├── SKILL.md ← you're reading this └── example.html ← a working WebGL2 aurora-field reference (READ FIRST) ``` ## Workflow ### Step 0 — Read the reference Read `example.html` end to end. Note the shape: one full-viewport `<canvas>`, a fragment-shader draw loop on a fullscreen triangle, a DPR-aware resize, and a `requestAnimationFrame` tick. The overlay (`kicker` → `h1` → `sub`) is pure HTML/CSS layered above the canvas via `z-index`. ### Step 1 — Choose the visual Pick ONE technique that fits the brief: - **Fragment-shader field**
- Why this is a powered artifact
- Resource map
- Workflow
- Step 0 — Read the reference
- Step 1 — Choose the visual
- Step 2 — Build index.html
- Step 3 — Overlay + brand
- Step 4 — Self-review (P0)
What does the webgl-experience skill do?
A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. Open Design serves this in powered-preview mode so the GPU stack actually runs.
How do I install it?
Run `npx skills add nexu-io/open-design --skill webgl-experience --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.