Agent skill · design visual · 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`. Use when the brief asks for a "raymarch", "signed distance field", "SDF", "3D hero", "metaballs", "blobs", or a shader-based 3D scene. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
Why this skill is useful
Adds a complete executable `index.html` for rendering a real-time 3D scene using advanced fragment shader techniques that aren't commonly found in public resources.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Raymarched Hero Skill 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. Why this is a powered artifact 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. Resource map Workflow Step 0 — Read the reference 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. Step 1 — Choose the SDF Keep the marcher cheap so it holds 60fps: Metaballs (default): a few spheres blended with smin — organic, always readable. Rounded primitives: box/torus/capsule SDFs with domain repetition for a structured hero. Displaced surface: a sphere plus a low-amplitude noise displacement for a molten look. Step 2 — Build index.html One file, zero external requests. Fullscreen triangle + fragment raymarch. Bound the march: cap iterations (~90), early-out on hit (d < 0.001) and on far distance; clamp DPR to ~1.5 — raymarching is per-pixel heavy. Light it: diffuse, a soft/penumbra shadow, a fresnel rim (pow(1 - dot(n,-rd), 3)), and one specular lobe. Gentle gamma at the end. 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 a restrained dark palette with one vivid accent (the reference tints the surface toward lime #63fe13 and rims it in teal). Headline ≤ 13ch plus one supporting line. Keep the 3D form as the hero. Step 4 — Self-review (P0) [ ] Renders continuously at ~60fps; the FPS badge updates. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/webgl-raymarched-hero