webgl-distortion-grain
Faz seu agente criar galerias onde as imagens se distorcem e ondulam com o movimento. É útil para adicionar um efeito dinâmico e artístico a apresentações visuais.
O que ela faz
Este código cria uma galeria de imagens vertical que se move e ondula quando você rola a página ou move o mouse. Ele também adiciona um efeito de grão de filme, como em câmeras antigas.
Quando usar
- ✓Para criar um site com um visual moderno e interativo.
- ✓Para exibir um portfólio de imagens de forma dinâmica.
- ✓Para adicionar um efeito especial em uma página web.
Exemplo do que pedir para a IA
“Crie uma galeria de imagens com efeito de ondulação e grão de filme.”
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 WebGL para desenhar as imagens na tela, fazendo com que elas se deformem suavemente com base na sua navegação. Um código especial (simplex noise) cria as ondulações quando o mouse passa por cima.
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-distortion-grainOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-distortion-grain/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.
Distorção e Granulação
Produz um index.html autônomo — Uma galeria vertical (Three.js) onde planos se dobram com a velocidade de rolagem, ondulam sob o cursor via ruído simplex e carregam granulação de filme.
Por que este é um artefato potencializado
O OpenDesign detecta getContext('webgl2') / WebGL pesado e renderiza este arquivo em visualização potencializada (um iframe cross-origin-isolated). O pipeline completo de GPU + rolagem é executado; não são necessárias soluções alternativas de sandbox opacas.
Mapa de recursos
webgl-distortion-grain/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Créditos / atribuição
- efeito: Jan Kohlbach / Codrops (MIT)
- imagens: Originais (geradas por IA)
- ruído simplex: Ashima Arts (MIT)
Mantenha qualquer LICENSE e crédito na tela incluídos. Substitua as imagens apenas por ativos com licença limpa (originais / IA, Lummi.ai, Unsplash/Pexels — nunca imagens raspadas).
Perguntas frequentes
O que é WebGL?
É uma tecnologia que permite que sites mostrem gráficos 3D e efeitos visuais complexos diretamente no navegador, usando a placa de vídeo do seu computador.
O que é 'simplex noise'?
É um algoritmo matemático que gera padrões de ruído suaves e orgânicos, usados aqui para criar o efeito de ondulação na imagem.
Posso usar minhas próprias imagens?
Sim, desde que sejam imagens livres de direitos autorais ou que você tenha permissão para usá-las.
Detalhes
Descrição original do autor
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #594
- 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