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
OpenDesign 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 (default): domain-warped fbm noise, flow fields, plasma, gradients. Cheapest, always 60fps.
- Raymarched scene: SDF spheres/boxes with soft shadows for a 3D hero.
- Instanced geometry: thousands of points/quads driven by a vertex shader.
- Post-processed image: sample a data-URI texture and distort/dither it.
Step 2 — Build index.html
- Keep it one file, zero external requests (inline the shader source; embed any texture as a
data:URI). Powered mode allows CDN loads, but self-contained previews are faster and portable. - Always:
alpha:false, DPR clamped to 2,viewporton resize, and a guard that shows a graceful message if the context is null. - Compile shaders with error logging (
getShaderInfoLog) so a typo fails loudly, not silently black.
Step 3 — Overlay + brand
- Map the two
:root-level accent colors to the active DESIGN.md when one is present; otherwise use a restrained dark palette with a single vivid accent (the reference uses lime#63fe13). - Headline ≤ 14ch, one supporting line. Never cover the whole canvas — the visual is the hero.
Step 4 — Self-review (P0)
- Renders continuously at ~60fps; the FPS badge updates.
- No WebGL console errors;
getError()clean after first frame. - Resizes crisply on window resize (no stretching / blur).
- Readable overlay contrast over the brightest frame.
- Degrades to a message (not a blank page) if
webgl2is unavailable.