🌍 Scroll World: sites animados com scroll infinito

Nível 3 · 🐷 Circe · ⏱️ ~30–60 min · Pré-requisitos: Claude Code (ou Codex) instalado, conta no serviço de geração de imagem/vídeo que a skill usa (a fala cita "ringsfield", provavelmente Higgsfield) e disposição para pagar por gerações

📌 Pra que serve

Scroll World é uma skill de código aberto (licença MIT, mais de 4 mil estrelas segundo o vídeo) para Claude Code, Codex e agentes compatíveis com SKILL.md. Segundo o README mostrado no vídeo, ela monta uma landing page imersiva de "voo pelo mundo". Ao rolar a página, a câmera entra em cada cena e segue para a próxima sem cortes. Serve a quem quer um site de marca, produto ou negócio com aquele efeito de scroll contínuo, sem animar nada à mão.

🛠️ Passo a passo

1. Abra o repositório da skill no GitHub (oso95/scroll-world, link abaixo) e leia o README. Ele traz o demo em vídeo e as instruções de instalação para cada agente. 2. Instale a skill no Claude Code como plugin, que é o método recomendado no README. Rode os dois comandos do bloco de instalação, um depois do outro. A linha de instalação aparece cortada no vídeo, então confira o texto exato no README. 3. No Codex ou em outro agente, siga a seção correspondente do README. O último commit do repositório cita "suporte a Codex e ao skills CLI", mas o comando exato não aparece nos quadros. 4. Descreva o site que você quer. Diga o tipo de negócio ou marca e o tema das cenas, por exemplo uma fazenda de chá, como no demo. O vídeo só diz "dizer a ela que tipo de site você está tentando construir". O prompt exato não é mostrado. 5. Aprove as imagens das cenas. A skill gera uma imagem por cena e mostra para você aprovar antes de seguir. É a hora de pedir ajustes, porque cada geração custa. 6. Deixe ela gerar o resto. Depois da aprovação, a skill transforma as cenas em vídeo, cri a as transições e junta tudo no site, com o scroll contínuo sem cortes. 7. Teste no celular. A skill já entrega uma versão mobile pensada para abrir de forma otimizada.

⚠️ Custo e limites

O README do fork mostrado no vídeo fala em "~17 gerações pagas" no upstream. Prepare-se para gastar créditos no serviço de geração.
Esse fork, de cth9191, é uma versão "endurecida". O README lista limites de orçamento e confirmação antes de gastar, verificação de costuras entre cenas, fallback para o modo de baixo consumo do iOS e versões de vídeo por tipo de dispositivo. Vale considerar se você quer mais controle de custo.
O vídeo não mostra o prompt exato que o autor usa, nem o resultado final rodando no celular. O autor promete o link por direct, que não está no material.

💡 Dica: Gaste seu tempo na etapa de aprovação das imagens. Rejeitar uma cena ruim ali custa bem menos do que refazer vídeos e transições depois. Se o orçamento for apertado, olhe o fork com limites de gasto.

🔗 Links e instalação

Fonte: https://www.instagram.com/reel/DbHK90cvtvR/

Repositório da skill: https://github.com/oso95/scroll-world

Fork com controle de gastos (cth9191): procure pelo fork de oso95/scroll-world a partir da página do repositório.

Instalação no Claude Code (confira no README, pois a linha aparece parcialmente cortada no vídeo):

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

Depois, no mesmo Claude Code, peça o site descrevendo o negócio e o estilo das cenas.