Webgl liquid metal
Skill nexu-io/open-design/plugins/_official/examples/webgl-liquid-metal
π¨ The open-source Claude Design alternative. π₯οΈ Local-first desktop app. πΌοΈ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video β real files, HTML/PDF/PPTX/MP4 export. π€ Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill webgl-liquid-metalAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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. Open Design serves this in powered-preview mode so the GPU stack actually runs.
SKILL.md
3.4 KB, as published. Nobody here has run it
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
Open Design 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
#63fe13as 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
webgl2is unavailable.