How do I install the Webgl Raymarched Hero skill?

Run npx skillmds@latest add gabrielmoreira/webgl-raymarched-hero in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Webgl Raymarched Hero safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Webgl Raymarched Hero?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Webgl Raymarched Hero free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Webgl Raymarched Hero?

gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Webgl Raymarched Hero by gabrielmoreira

Name: Webgl Raymarched Hero
Rating: 4.666666666666667 (3 reviews)
Author: gabrielmoreira

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.

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

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

webgl-raymarched-hero/
├── SKILL.md      ← you're reading this
└── example.html  ← a working SDF metaball raymarcher (READ FIRST)

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.
Surface has real depth cues: shadow, rim, and a moving specular.
No banding artifacts at the silhouette; normals are stable.
Resizes crisply on window resize (no stretching / blur).
Degrades to a message (not a blank page) if webgl2 is unavailable.

---name: webgl-raymarched-herodescription: 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.--- # 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 ``` webgl-raymarched-hero/ ├── SKILL.md ← you're reading this └── example.html ← a working SDF metaball raymarcher (READ FIRST) ``` ## 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. - [ ] Surface has real depth cues: shadow, rim, and a moving specular. - [ ] No banding artifacts at the silhouette; normals are stable. - [ ] Resizes crisply on window resize (no stretching / blur). - [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.

Frequently asked questions