webgl-voronoi-cells
Lets your agent create an animated Voronoi cell network. Cells shift and react to mouse movement. Great for creating dynamic, interactive interfaces or visuals.
What it does
This code creates an interactive visual animation using advanced graphics. It displays cells that move and change color, and you can interact with them by moving your mouse.
When to use it
- ✓To create an interesting animated background for a website.
- ✓To demonstrate a unique visual effect in a project.
- ✓To add a dynamic and eye-catching element to a web page.
Example of what to ask your AI
“Create an interactive background with moving cells.”
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 graphics directly in your browser. The cells are generated based on moving points, and their colors and outlines change as you interact with the mouse.
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-voronoi-cellsOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-voronoi-cells/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Voronoi Cells
Produce a single self-contained index.html — A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
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-voronoi-cells/
├── 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 'Voronoi cells'?
These are regions defined by points. Each cell contains all points closer to a specific center point than to any other center point.
Do I need to install anything to use it?
No, the code is 'self-contained,' meaning it comes with everything it needs and works directly in your browser.
Can I change the colors?
Yes, the code allows you to define a color palette for the cells, and they are assigned based on this palette.
Details
Original description by the author
A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #604
- 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