webgl-pixel-reveal-gallery
Faz seu agente criar uma galeria de imagens que reage ao scroll. As imagens aparecem gradualmente e podem ser vistas em tela cheia. Ideal para apresentações visuais interativas.
O que ela faz
Cria uma galeria de imagens que se anima ao rolar a página. As imagens aparecem gradualmente a partir de pixels ou grades quando entram na tela, com um título que se divide em letras e a opção de ver a imagem em tela cheia ao clicar.
Quando usar
- ✓Para criar uma página de portfólio visualmente interessante.
- ✓Ao desenvolver um site para exibir fotos ou arte.
- ✓Para adicionar um efeito moderno e dinâmico a um site.
Exemplo do que pedir para a IA
“Crie uma galeria de imagens com efeito de pixels que aparece ao rolar, título animado e zoom nas imagens.”
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 bibliotecas de animação (Three.js e GSAP) para criar o efeito visual. Quando você rola a página, as imagens são carregadas e aparecem com uma animação de dissolução de pixels. Clicar em uma imagem a expande.
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-pixel-reveal-galleryOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-pixel-reveal-gallery/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.
Galeria Pixel Reveal
Produza um único arquivo autônomo index.html — Uma galeria de alvenaria reativa à rolagem (Three.js + GSAP) onde cada imagem se desenvolve a partir de uma dissolução de pixels/grade ao entrar na viewport, com um título split-text e Flip para tela cheia ao clicar.
Por que este é um artefato poderoso
O OpenDesign detecta getContext('webgl2') / WebGL pesado e renderiza este arquivo em preview poderoso (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-pixel-reveal-gallery/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Créditos / atribuição
- Efeito: J0SUKE / Codrops (MIT)
- Imagens: Originais (geradas por IA)
Mantenha qualquer LICENSE e crédito na tela incluídos intactos. Substitua as imagens apenas por ativos limpos de licença (originais / IA, Lummi.ai, Unsplash/Pexels — nunca imagens raspadas).
Perguntas frequentes
O que é 'masonry gallery'?
É um tipo de layout onde os itens (neste caso, imagens) são organizados de forma que preenchem o espaço disponível, como peças de um quebra-cabeça, sem deixar grandes espaços vazios.
O que são Three.js e GSAP?
São ferramentas (bibliotecas) que ajudam os desenvolvedores a criar animações e gráficos complexos na web, como os efeitos visuais desta galeria.
O que significa 'click-to-fullscreen Flip'?
Significa que, ao clicar em uma imagem, ela se expande para ocupar a tela inteira (fullscreen) de uma maneira animada (Flip).
Detalhes
Descrição original do autor
A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #602
- 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