webgl-caustic-pool
Helps your agent generate realistic shimmering water and ripple effects. It's great for adding a touch of realism to digital water scenes.
What it does
This code creates a visual demonstration of water ripples using advanced browser graphics. You can click on the water to create new ripples.
When to use it
- ✓To showcase a beautiful and dynamic visual effect.
- ✓To test the browser's ability to display 3D graphics.
- ✓As a simple example of web animation.
Example of what to ask your AI
“Show a water ripple effect in my browser.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses a technology called WebGL2 to draw directly on the computer screen, without needing pre-made images. The ripples are created from mathematical calculations that simulate water movement.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill webgl-caustic-poolOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-caustic-pool/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
OpenDesign 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).
FAQ
What are 'caustics'?
These are the light and shadow patterns we see when light passes through a wavy surface, like water.
Do I need to install anything to use it?
No, everything works directly in your web browser.
Can I change the colors or speed?
This specific code doesn't offer direct customization options, but it's an example of how to create these effects.
Details
Original description by the author
A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #592
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
ios-icon-gen
Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.
affaan-m/ECC
algorithmic-art
Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.
anthropics/skills
canvas-design
Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.
anthropics/skills