webgl-depth-gallery
Permite ao agente criar galerias de imagens 3D interativas que reagem ao scroll. É ideal para apresentar portfólios de forma visualmente envolvente.
O que ela faz
Cria uma galeria de imagens 3D interativa que reage ao rolar da página. As imagens aparecem e desaparecem suavemente umas sobre as outras, com um rastro brilhante do cursor e um cartão de cores.
Quando usar
- ✓Para apresentar um portfólio de fotos de forma dinâmica.
- ✓Para criar uma página web visualmente impactante.
- ✓Para exibir produtos com um efeito 3D.
Exemplo do que pedir para a IA
“Crie uma galeria 3D com minhas fotos de viagem, com um fundo que muda para cada foto.”
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
Esta ferramenta usa uma tecnologia chamada WebGL para criar gráficos 3D no seu navegador. Ela organiza suas imagens em profundidade e as transiciona suavemente enquanto você rola a página, adicionando efeitos visuais.
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-depth-galleryOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-depth-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 de Profundidade
Produz uma index.html única e autônoma — Uma galeria de imagens 3D reativa à rolagem em Three.js: imagens em Z-fase se misturam sobre fundos de humor por imagem com respiração de velocidade, um rastro de cursor brilhante e um cartão de cores editorial CMYK/RGB/HEX/PMS.
Por que este é um artefato potencializado
OpenDesign detecta getContext('webgl2') / WebGL pesado e renderiza este arquivo em visualização potencializada (um iframe isolado entre origens). O pipeline completo de GPU + rolagem é executado; não são necessárias soluções alternativas de sandbox opacas.
Mapa de recursos
webgl-depth-gallery/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Créditos / atribuição
- efeito: Houmahani Kane / Codrops (MIT)
- imagens: Lummi.ai
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 é 'scroll-reactive'?
Significa que a galeria reage e muda conforme você rola a página para cima ou para baixo.
O que é 'velocity breath'?
É um efeito que faz as imagens parecerem respirar ou pulsar suavemente com a velocidade do seu movimento.
O que é o 'glowing cursor trail'?
É um rastro brilhante que segue o seu cursor do mouse na tela.
Detalhes
Descrição original do autor
A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #593
- 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