How do I install the Webgl Liquid Metal skill?

Run npx skillmds@latest add gabrielmoreira/webgl-liquid-metal 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 Liquid Metal 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 Liquid Metal?

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 Liquid Metal free to use?

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

Who published Webgl Liquid Metal?

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

Webgl Liquid Metal by gabrielmoreira

Name: Webgl Liquid Metal
Rating: 4.2 (5 reviews)
Author: gabrielmoreira

Webgl Liquid Metal

A real-time liquid-metal shader — a domain-warped noise field shaded as molten chrome, with a sweeping specular highlight over an iridescent thin-film (cosine-palette) sheen. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "liquid metal", "molten chrome", "iridescent", "holographic", "metallic", "thin-film", or a reflective flowing surface. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

Liquid Metal Skill

Produce a single self-contained index.html that renders a real-time metallic surface full-screen — molten chrome with an iridescent sheen — 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-liquid-metal/
├── SKILL.md      ← you're reading this
└── example.html  ← a working domain-warped chrome shader (READ FIRST)

Workflow

Step 0 — Read the reference

Read example.html end to end. Note the shape: a domain-warped fbm height field; a surface normal reconstructed from that field's gradient (finite differences); metallic shading = diffuse chrome ramp + a sharp specular (pow(dot(n,h), 80)) + a fresnel term; and an iridescent cosine palette (0.5 + 0.5*cos(2π(x + phase))) driven by height and fresnel for the thin-film sheen.

Step 1 — Choose the surface

Molten chrome (default): domain-warped fbm height, hard specular, cool grey base.
Holographic foil: crank the iridescence, widen the palette phase spread, soften the specular.
Oil slick: darker base, thinner high-frequency warp, stronger fresnel bands.

Step 2 — Build `index.html`

One file, zero external requests. Fullscreen triangle + fragment shader.
Reconstruct the normal from small height offsets (e ≈ 0.0016); a sharp specular exponent (≥ 60) is what reads as "metal".
Keep the iridescence tasteful — tie it to fresnel/height so it appears at grazing angles, not everywhere.
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 metallic palette. The reference tints the hottest specular toward lime #63fe13 as the brand accent.
Headline ≤ 13ch plus one supporting line. Keep the metal as the hero.

Step 4 — Self-review (P0)

Renders continuously at ~60fps; the FPS badge updates.
Reads unmistakably as metal: a sharp, moving specular highlight.
Iridescence is present but restrained (grazing angles), not a rainbow wash.
Resizes crisply on window resize (no stretching / blur).
Degrades to a message (not a blank page) if webgl2 is unavailable.

---name: webgl-liquid-metaldescription: A real-time liquid-metal shader — a domain-warped noise field shaded as molten chrome, with a sweeping specular highlight over an iridescent thin-film (cosine-palette) sheen. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "liquid metal", "molten chrome", "iridescent", "holographic", "metallic", "thin-film", or a reflective flowing surface. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.--- # Liquid Metal Skill Produce a single self-contained `index.html` that renders a real-time metallic surface full-screen — molten chrome with an iridescent sheen — 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-liquid-metal/ ├── SKILL.md ← you're reading this └── example.html ← a working domain-warped chrome shader (READ FIRST) ``` ## Workflow ### Step 0 — Read the reference Read `example.html` end to end. Note the shape: a domain-warped `fbm` **height field**; a surface normal reconstructed from that field's gradient (finite differences); metallic shading = diffuse chrome ramp + a sharp specular (`pow(dot(n,h), 80)`) + a fresnel term; and an **iridescent cosine palette** (`0.5 + 0.5*cos(2π(x + phase))`) driven by height and fresnel for the thin-film sheen. ### Step 1 — Choose the surface - **Molten chrome** (default): domain-warped fbm height, hard specular, cool grey base. - **Holographic foil**: crank the iridescence, widen the palette phase spread, soften the specular. - **Oil slick**: darker base, thinner high-frequency warp, stronger fresnel bands. ### Step 2 — Build `index.html` - One file, zero external requests. Fullscreen triangle + fragment shader. - Reconstruct the normal from small height offsets (`e ≈ 0.0016`); a sharp specular exponent (≥ 60) is what reads as "metal". - Keep the iridescence tasteful — tie it to fresnel/height so it appears at grazing angles, not everywhere. - 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 metallic palette. The reference tints the hottest specular toward lime `#63fe13` as the brand accent. - Headline ≤ 13ch plus one supporting line. Keep the metal as the hero. ### Step 4 — Self-review (P0) - [ ] Renders continuously at ~60fps; the FPS badge updates. - [ ] Reads unmistakably as metal: a sharp, moving specular highlight. - [ ] Iridescence is present but restrained (grazing angles), not a rainbow wash. - [ ] Resizes crisply on window resize (no stretching / blur). - [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.

Frequently asked questions