webgl-horizontal-parallax
Faz seu agente criar galerias que se movem horizontalmente com efeito de paralaxe. É útil para apresentar imagens de forma dinâmica e com profundidade.
O que ela faz
Cria uma galeria de imagens que rola horizontalmente usando tecnologia avançada (WebGL). As imagens se movem suavemente para o lado e cada uma tem um efeito de profundidade que muda conforme você se move.
Quando usar
- ✓Para criar um portfólio visual online.
- ✓Para apresentar um projeto com um toque moderno.
- ✓Para fazer um site de eventos com navegação lateral.
Exemplo do que pedir para a IA
“Crie uma galeria horizontal com efeito parallax para minhas fotos de viagem.”
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 biblioteca gráfica chamada Three.js para desenhar as imagens em 3D. Um efeito especial faz com que as imagens pareçam se mover em diferentes profundidades enquanto você rola a página.
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-horizontal-parallaxOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-horizontal-parallax/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 Parallax Horizontal
Produz um index.html único e autônomo — Uma galeria de rolagem horizontal em WebGL (Three.js): os quadros deslizam para os lados com suavização lerp e cada imagem cria um efeito parallax em sua textura (deslocamento UV) pela sua posição na viewport.
Por que este é um artefato poderoso
O 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; não são necessárias soluções alternativas de sandbox opacas.
Mapa de recursos
webgl-horizontal-parallax/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Créditos / atribuição
- efeito: David Faure / Codrops (MIT)
- imagens: Original (gerado 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 é WebGL?
É uma tecnologia que permite exibir gráficos 2D e 3D interativos diretamente no navegador, sem precisar de plugins.
O que é 'parallax'?
É um efeito visual onde elementos em primeiro plano se movem mais rápido que os elementos em segundo plano, criando uma sensação de profundidade.
Preciso instalar algo?
Não, o resultado é um único arquivo HTML que funciona diretamente no navegador.
Detalhes
Descrição original do autor
A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #597
- 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