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

webgl-liquid-iridescence

Generate a self-contained WebGL2 interactive hero animation featuring an iridescent oil-on-water flow field.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a high-performance, GPU-accelerated visual hero component without requiring external assets, complex build steps, or heavy dependencies, solving the need for lightweight, interactive web visuals.

Core Features & Use Cases

  • GPU-Accelerated Rendering: Utilizes WebGL2 for real-time, high-fidelity shader execution directly in the browser.
  • Interactive Flow: Implements cursor-reactive domain warping that allows users to manipulate the liquid field dynamically.
  • Use Case: Ideal for landing pages or design prototypes requiring a sophisticated, modern aesthetic that remains performant and self-contained.

Quick Start

Generate a new WebGL2 liquid iridescence hero component for the current design prototype.

Frequently Asked Questions about webgl-liquid-iridescence

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

FAQPage Schema
How do I implement a WebGL2 hero animation?▼

Use the webgl-liquid-iridescence skill to generate a self-contained HTML file containing the necessary vertex and fragment shaders. The skill handles the boilerplate for canvas initialization, pointer interaction, and the animation loop.

What are the performance requirements for this WebGL hero?▼

This hero animation requires a browser with WebGL2 support and a GPU capable of handling fragment shader calculations. It is designed to be lightweight, running entirely on the client-side without external assets or heavy frameworks.

Can I customize the iridescent color palette?▼

Yes, you can modify the cosine palette function within the fragment shader code in the generated index.html. Adjusting the coefficients in the pal() function will shift the color spectrum of the caustic filaments.

Does this skill require external dependencies?▼

No, this skill is entirely self-contained and does not require any external JavaScript libraries, frameworks, or assets. All logic is implemented in native WebGL2 and standard JavaScript.

Related Skills

Explore More Design & Creative Skills→
Legal-and-GeneralLegal-and-General
23

canopy-hero

Guides engineers to implement Canopy Hero sections with breadcrumbs and responsive layouts in Angular projects.

Official
Intermediate
Generous-CorpGenerous-Corp
13

pulp-web-demo

Generate WAM and WCLAP browser demos from declarative configurations.

Official
Advanced
misty-stepmisty-step
13

vercel-react-view-transitions

Implement React ViewTransition API transitions in Next.js apps with declarative wrappers.

Official
Advanced
curiositechcuriositech
181

web-cloud-designer

Generate animated cloud effects for web interfaces using SVG filters and CSS animations.

Official
Advanced