webgl-caustic-pool

Generate a self-contained WebGL2 animated water caustic hero artifact for web design prototypes.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #web-design #generative #shader #webGL #caustics

One-click install

npx skills add https://github.com/nexu-io/open-design --skill webgl-caustic-pool

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: webgl-caustic-pool
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-caustic-pool
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-caustic-pool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of creating high-fidelity, performant, and self-contained visual assets for web prototypes without relying on heavy external textures, meshes, or complex build pipelines.

Core Features & Use Cases

GPU-Accelerated Rendering: Utilizes WebGL2 to generate real-time water caustics directly in the browser.
Interactive Elements: Supports pointer-based interaction to trigger ripples that dynamically warp the caustic network.
Use Case: Use this to generate a high-impact hero section for a design prototype that requires fluid, organic motion without increasing page load times or asset overhead.

Quick Start

Generate a webgl caustic pool hero artifact for the current design project.

Frequently Asked Questions about webgl-caustic-pool

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

FAQPage Schema

How do I add the caustic pool to my web project?▼

The caustic pool is a self-contained HTML file. You can embed it directly into your project as an iframe or copy the provided script and canvas elements into your existing codebase.

Does the caustic pool require external assets or textures?▼

No, the caustic pool is entirely procedural. It uses a WebGL2 fragment shader to calculate ripples and light refraction in real-time, requiring no external images or 3D models.

What are the performance requirements for this WebGL hero?▼

The effect runs on any modern browser supporting WebGL2. It is optimized for GPU execution, ensuring smooth performance even on lower-end devices by avoiding heavy mesh geometry.

Can I customize the ripple interaction or colors?▼

Yes, you can modify the uniform variables within the fragment shader code to adjust the caustic color palette, ripple intensity, or the speed of the animation.