webgl-voronoi-cells
Faz seu agente criar uma rede de células Voronoi animada. As células mudam e reagem ao movimento do mouse. Ótimo para criar interfaces ou visuais dinâmicos e interativos.
O que ela faz
Este código cria uma animação visual interativa usando gráficos avançados. Ele mostra células que se movem e mudam de cor, e você pode interagir com elas movendo o mouse.
Quando usar
- ✓Para criar um fundo animado e interessante para um site.
- ✓Para demonstrar um efeito visual único em um projeto.
- ✓Para adicionar um elemento dinâmico e atraente a uma página web.
Exemplo do que pedir para a IA
“Crie um fundo interativo com células que se movem.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele usa uma tecnologia chamada WebGL2 para desenhar gráficos diretamente no seu navegador. As células são geradas com base em pontos que se movem, e suas cores e contornos mudam conforme você interage com o mouse.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill webgl-voronoi-cellsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-voronoi-cells/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Células de Voronoi
Produz um index.html único e autônomo — Um herói WebGL2 autônomo: uma rede Voronoi viva com pontos de característica à deriva, células com paleta de cores e contornos brilhantes; mova o cursor para empurrar as células.
Por que este é um artefato poderoso
O OpenDesign detecta getContext('webgl2') / WebGL pesado e renderiza este arquivo em visualização poderosa (um iframe isolado de origem cruzada). O pipeline completo de GPU + rolagem é executado; não são necessárias soluções alternativas de sandbox opacas.
Mapa de recursos
webgl-voronoi-cells/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Créditos / atribuição
- Original, autônomo (sem ativos de terceiros).
Mantenha qualquer LICENSE e crédito na tela incluídos intactos. Substitua imagens apenas por ativos com licença limpa (originais / IA, Lummi.ai, Unsplash/Pexels — nunca imagens raspadas).
Perguntas frequentes
O que são 'células de Voronoi'?
São regiões definidas por pontos. Cada célula contém todos os pontos mais próximos de um ponto central específico do que de qualquer outro ponto central.
Preciso instalar algo para usar?
Não, o código é 'autocontido', o que significa que ele vem com tudo o que precisa e funciona diretamente no seu navegador.
Posso mudar as cores?
Sim, o código permite definir uma paleta de cores para as células, e elas são atribuídas com base nessa paleta.
Detalhes
Descrição original do autor
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
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #604
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
ios-icon-gen
Faz seu agente gerar ícones para aplicativos iOS. Ele usa símbolos da Apple ou ícones de outras fontes para criar os arquivos corretos.
affaan-m/ECC
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills