O que scroll-world-openart faz?
Páginas de destino imersivas com rolagem 'voando pelo mundo', geradas com OpenArt. Uma skill de agente para Claude Code, Codex e qualquer agente compatível com SKILL.md.
Visão Geral
Esta skill cria landing pages que combinam o efeito de scroll-scrubbing (onde o conteúdo se move conforme o usuário rola a página) com imagens geradas por IA do OpenArt. O resultado é uma experiência visual única, como se o usuário estivesse sobrevoando um mundo desenhado.
Como Usar
- Obtenha imagens geradas pelo OpenArt: Crie uma sequência de imagens que representem diferentes cenas ou ângulos de um mesmo mundo. É recomendado usar um prompt consistente e variar o ângulo ou a cena.
- Configure o projeto: No SKILL.md, especifique o caminho para as imagens ou utilize placeholders.
- Execute a skill: O agente irá gerar o código HTML, CSS e JavaScript necessários para o efeito.
Exemplo de Estrutura de Arquivos
projeto/
├── index.html
├── style.css
├── script.js
└── images/
├── cena1.jpg
├── cena2.jpg
└── cena3.jpg
Parâmetros da Skill
| Parâmetro | Tipo | Descrição | Obrigatório |
|---|---|---|---|
images | array | Lista de caminhos para as imagens (OpenArt) | Sim |
scrollSpeed | number | Velocidade da transição entre imagens (1-10) | Não (padrão: 5) |
bgColor | string | Cor de fundo entre as imagens | Não |
Como Funciona
A skill utiliza JavaScript para monitorar a posição de rolagem (window.scrollY) e, com base nela, alterna ou faz a transição entre as imagens fornecidas. As imagens são posicionadas em camadas (com z-index) e a opacidade ou transformação CSS (como translateZ) é ajustada dinamicamente. O OpenArt fornece imagens de alta qualidade que são usadas como fundo.
Compatibilidade
- Claude Code: Sim
- Codex (Cursor): Sim
- Qualquer agente compatível com SKILL.md: Sim
Personalização
- Altere a
scrollSpeedpara controlar a fluidez da transição. - Defina uma
bgColorpara evitar espaços vazios entre as imagens. - Use imagens do OpenArt com temas específicos (fantasia, ficção científica, natureza).
Exemplo de Uso com o Agente
Ao usar esta skill, o agente irá:
1. Solicitar uma lista de imagens.
2. Gerar o código HTML/CSS/JS completo.
3. Incluir instruções de como implantar.
Notas
- Certifique-se de que as imagens tenham proporções semelhantes para um efeito suave.
- A skill é otimizada para navegadores modernos (Chrome, Firefox, Safari, Edge).
- Para melhor desempenho, use imagens em formato WebP ou JPEG comprimido.
Skill gerada para agentes compatíveis. Mais informações em salamsoft/scroll-world-openart.