skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

webgl-liquid-metal

Generate real-time molten chrome shaders using WebGL2 for high-performance visual design prototypes.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#prototype#GPU#generative#shader#webGL#metallic#iridescent
One-click install
npx skills add https://github.com/nexu-io/open-design --skill webgl-liquid-metal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webgl-liquid-metal
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-liquid-metal
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-liquid-metal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of creating high-fidelity, GPU-accelerated visual effects without the overhead of external assets or complex build pipelines, enabling rapid design iteration.

Core Features & Use Cases

  • Real-time Shader Generation: Produces a self-contained index.html featuring a domain-warped noise field rendered as molten chrome.
  • Visual Effects: Implements iridescent thin-film sheen and sharp specular highlights using mathematical cosine palettes.
  • Use Case: Use this when a design brief requires holographic, metallic, or reflective flowing surfaces for web-based prototypes or hero animations.

Quick Start

Generate a full-screen liquid metal shader using the webgl-liquid-metal skill for the current design prototype.

Frequently Asked Questions about webgl-liquid-metal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a liquid metal shader?▼

Invoke the webgl-liquid-metal skill to produce a self-contained index.html file that renders a domain-warped height field with metallic shading and iridescent highlights.

Does this shader require external image textures?▼

No, the shader is entirely procedural and uses mathematical noise functions (fbm) to generate the molten chrome surface, ensuring zero external dependencies.

Can I customize the metallic surface appearance?▼

Yes, you can adjust the shader parameters in the generated index.html to switch between molten chrome, holographic foil, or oil slick effects by modifying the palette phase and specular exponent.

Why is my shader rendering as a black screen?▼

Ensure your environment supports WebGL2 and that the browser has hardware acceleration enabled, as the shader relies on the GPU pipeline for real-time rendering.

What is the performance impact of this shader?▼

The shader is optimized for 60fps performance by using a single-pass fragment shader on a full-screen triangle, minimizing CPU-to-GPU communication overhead.

Related Skills

Explore More Design & Creative Skills→
crossxwillcrossxwill
5

brand-guidelines

Apply predefined brand color palettes and typography rules to artifacts.

Community
Basic
SheshiyerSheshiyer

pitch-experience-generator

Generate IDE-ready pitch project scaffolding and a React artifact preview.

Community
Advanced
summarybotngsummarybotng
2

compatibility-testing

Test web applications across browsers, platforms, and devices using BrowserStack and Playwright.

Official
Advanced
hotriluanhotriluan
2

shader

Generate GLSL fragment shaders for procedural graphics and real-time effects.

Community
Advanced