webgl-caustic-pool
Ajuda seu agente a gerar efeitos de água cintilante e ondulações realistas. É ótimo para adicionar um toque de realismo a cenas aquáticas digitais.
O que ela faz
Este código cria uma demonstração visual de ondas na água usando gráficos avançados no navegador. Você pode clicar na água para criar novas ondas.
Quando usar
- ✓Para mostrar um efeito visual bonito e dinâmico.
- ✓Para testar a capacidade do navegador de exibir gráficos 3D.
- ✓Como um exemplo simples de animação na web.
Exemplo do que pedir para a IA
“Mostre um efeito de ondas na água no meu navegador.”
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 diretamente na tela do computador, sem precisar de imagens prontas. As ondas são criadas a partir de cálculos matemáticos que simulam o movimento da água.
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-caustic-poolOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-caustic-pool/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.
Piscina Cáustica
Produz um único index.html autônomo — Um herói WebGL2 autônomo: cáusticas de água animadas tecidas a partir de ondulações distorcidas por domínio; clique na água para soltar uma ondulação. Sem malhas, sem texturas.
Por que este é um artefato poderoso
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 + scroll é executado; nenhuma solução alternativa de sandbox opaca é necessária.
Mapa de recursos
webgl-caustic-pool/
├── 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 limpos de licença (originais / IA, Lummi.ai, Unsplash/Pexels — nunca imagens raspadas).
Perguntas frequentes
O que são 'caustics'?
São os padrões de luz e sombra que vemos quando a luz passa por uma superfície ondulada, como a água.
Preciso instalar algo para usar?
Não, tudo funciona diretamente no seu navegador de internet.
Posso mudar as cores ou a velocidade?
Este código específico não oferece opções de personalização direta, mas é um exemplo de como criar esses efeitos.
Detalhes
Descrição original do autor
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
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #592
- 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