webgl-voronoi-cells

Generate a self-contained WebGL2 hero artifact featuring an interactive, animated Voronoi network.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #generative #shader #hero #Voronoi #webGL #WebGL2

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the need for high-performance, self-contained visual assets in web design, eliminating the complexity of managing external dependencies or heavy assets for hero sections.

Core Features & Use Cases

WebGL2 Rendering: Leverages GPU-accelerated shaders for smooth, high-frame-rate animations.
Interactive Feedback: Implements cursor-reactive physics where the Voronoi cells respond to pointer movement.
Use Case: Ideal for creating immersive, lightweight landing page backgrounds or hero visuals that require no external image or video files.

Quick Start

Generate a new webgl-voronoi-cells hero artifact for the current design project.

Frequently Asked Questions about webgl-voronoi-cells

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

FAQPage Schema

How do I implement the Voronoi hero in my web project?▼

The Skill generates a self-contained index.html file containing all necessary CSS, HTML, and WebGL2 shader code. You can embed this directly into your project or use it as a standalone prototype.

Does this WebGL hero require external assets?▼

No, the Voronoi network is entirely self-contained. It uses procedural generation for feature points and shader-based rendering, requiring no external images, textures, or third-party libraries.

Can I customize the color palette of the cells?▼

Yes, the color palette is defined within the fragment shader code in the example.html file. You can modify the `pal` function to adjust the color mapping and aesthetic of the cells.

What are the performance requirements for this WebGL effect?▼

The effect uses WebGL2 and runs on the client GPU. It is designed to be lightweight, but performance depends on the user's hardware and browser support for WebGL2.