webgl-liquid-iridescence
Ajuda seu agente a gerar um efeito de líquido iridescente e brilhante. É ótimo para criar visuais abstratos e fluidos com cores vibrantes.
O que ela faz
Este código cria uma animação visual bonita e dinâmica que parece óleo na água, com cores brilhantes e filamentos luminosos. Você pode interagir com ela movendo o mouse para mudar o fluxo da animação.
Quando usar
- ✓Para decorar um site com um visual artístico.
- ✓Para criar um fundo animado interessante.
- ✓Para demonstrar um efeito visual impressionante.
Exemplo do que pedir para a IA
“Crie uma animação de 'óleo na água' com efeitos de luz.”
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 navegador. A animação reage ao movimento do seu mouse, alterando a forma como a luz e as cores aparecem na tela.
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-liquid-iridescenceOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-liquid-iridescence/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.
Iridescência Líquida
Produz um index.html único e autônomo — Um herói WebGL2 autônomo: um campo vivo de óleo sobre água iluminado em filamentos cáusticos iridescentes; mova o cursor para curvar o fluxo.
Por que este é um artefato poderoso
O OpenDesign detecta getContext('webgl2') / WebGL pesado e renderiza este arquivo em visualização poderosa (um iframe com isolamento cross-origin). O pipeline completo de GPU + scroll é executado; nenhuma solução alternativa de sandbox opaca é necessária.
Mapa de recursos
webgl-liquid-iridescence/
├── 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 é WebGL2?
É uma tecnologia que permite criar gráficos 2D e 3D complexos diretamente no seu navegador de internet, usando o poder da sua placa de vídeo.
O que significa 'self-contained'?
Significa que o código funciona sozinho, sem precisar de outros arquivos ou programas externos para rodar.
Como o mouse afeta a animação?
Quando você move o mouse sobre a animação, ele muda a direção e a forma dos 'filamentos' de luz, como se estivesse mexendo em uma poça de óleo.
Detalhes
Descrição original do autor
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #598
- 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