New to Claude Skills? Learn how to install them →

nexu-io on GitHub

Caustic Pool

Free

Create interactive animated water caustics in WebGL2.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Caustic Pool does

Caustic Pool is a self-contained WebGL2 example that showcases animated water caustics generated from domain-warped ripples. Users can interact with the animation by clicking on the water surface to create ripples. This skill is particularly useful for developers and designers looking to understand or implement visually appealing water effects in their web projects without the overhead of meshes or textures. It serves as a practical demonstration of WebGL2 capabilities, focusing on real-time rendering and user interaction.

The skill provides an index.html file that is fully operational, allowing users to see the effects in action immediately. It leverages the power of WebGL2, which is detected by the Open Design framework to render the content in a powered preview. This ensures that the full GPU capabilities are utilized without the need for opaque-sandbox workarounds, making it ideal for performance-sensitive applications.

For those interested in graphics programming or web development, Caustic Pool serves as both a learning tool and a starting point for creating more complex water effects. The absence of third-party assets means that the implementation is clean and straightforward, allowing users to focus on the core functionality and aesthetics of the caustics. This skill is suitable for anyone looking to enhance their web applications with visually stunning effects while maintaining a lightweight footprint.

When to use it

Use this skill when you need a simple, interactive water effect for a web project or want to learn about WebGL2 rendering techniques.

When not to use it

This skill may not be suitable for projects requiring extensive 3D modeling or complex textures, as it focuses solely on caustics without additional assets.

What you can build with it

Web Development Projects

Integrate the Caustic Pool example into your web applications to add an engaging water effect.

Learning WebGL2

Use this skill as a practical demonstration to understand how to create animated effects with WebGL2.

Interactive Demos

Create interactive demos or prototypes that showcase real-time graphics capabilities using the provided example.

How to install Caustic Pool

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/webgl-caustic-pool --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Caustic Pool

Produce a single self-contained index.html — A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.

Why this is a powered artifact

Open Design detects getContext('webgl2') / heavy WebGL and renders this file in powered preview (a cross-origin-isolated iframe). The full GPU + scroll pipeline runs; no opaque-sandbox workarounds are needed.

Resource map

webgl-caustic-pool/
├── SKILL.md          ← you're reading this
├── example.html      ← the complete, working artifact (READ FIRST)
└── (assets, if any)

Credits / attribution

  • Original, self-contained (no third-party assets).

Keep any bundled LICENSE and on-screen credit intact. Replace imagery only with license-clean assets (original / AI, Lummi.ai, Unsplash/Pexels — never scraped imagery).

Frequently asked questions about Caustic Pool

Similar skills