Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/webgl-raymarched-hero
A real-time raymarched 3D hero — soft-shadowed morphing metaballs with a fresnel rim light, sphere-traced per pixel in a fragment shader with a slow camera orbit. No meshes, no textures. Rendered as a single self-contained `index.html`.
Passed 15 of 22 test cases with the skill, and 16 of 22 without it.
1 fixed14 passed either way5 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
I'm building a raymarched shader background for an HTML landing page. When initializing WebGL in JavaScript, what context name should I request, and what should happen in the DOM if the user's browser or device fails to obtain that context?
| Checked | Without skill | With skill |
|---|---|---|
| The script requests the context string 'webgl2'. | Passed | Passed |
| The code renders a DOM text message if context creation returns null. | Missed | Passed |
The instructions your model reads when the skill loads.
Produce a single self-contained index.html that renders a real-time 3D scene entirely in a fragment shader via sphere tracing, full-screen, with a clean typographic overlay on top.
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.
webgl-raymarched-hero/
├── SKILL.md ← you're reading this
└── example.html ← a working SDF metaball raymarcher (READ FIRST)
Read example.html end to end. Note the shape: one fullscreen triangle; a map(p) signed-distance function that smooth-unions (smin) several moving spheres; normals by finite differences; a softShadow march; and a camera built from ro/ta with a slow orbit. Shading = diffuse × soft shadow + fresnel rim + a tight specular.
Keep the marcher cheap so it holds 60fps:
smin — organic, always readable.index.htmld < 0.001) and on far distance; clamp DPR to ~1.5 — raymarching is per-pixel heavy.pow(1 - dot(n,-rd), 3)), and one specular lobe. Gentle gamma at the end.#63fe13 and rims it in teal).test cases passed, vs 16 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.