Criador de sites com animação no scroll

Um prompt monta um site em que o scroll move a câmera: mergulha numa cena, sai voando, pousa na próxima, sem cortes.

Katagiri High — The Last Light, construído no mundo Horimiya para esta página. Role dentro do quadro: três cenas, duas emendas, um único voo contínuo.

The Descent — uma ponte de cristal desce em espiral por um abismo, com texto de cena e navegação

The Hollow Star — a sala do trono vista pelo corredor, título de cena The Hollow Center

Odyssey — o Ciclope ocupando a caverna, título de cena The Cyclops

Scroll of Colossal Things — uma baleia do tamanho de uma ilha sob um barco pequeno, estilo tinta

SENGOKU — O acampamento acorda — Ato I de três. O scroll desce a câmera entre os estandartes até as tendas; a página diz SCROLL TO DESCEND e cumpre. — **O acampamento acorda** — Ato I de três. O scroll desce a câmera entre os estandartes até as tendas; a página diz SCROLL TO DESCEND e cumpre.

SENGOKU — O campo das lâminas — Ato II. Sem corte para o campo de batalha: a mesma câmera cruza a ponte vermelha, e lanças e tambores chegam ao redor. — **O campo das lâminas** — Ato II. Sem corte para o campo de batalha: a mesma câmera cruza a ponte vermelha, e lanças e tambores chegam ao redor.

SENGOKU — O castelo branco — Ato III. O voo termina na torre de menagem e oferece repetir. Três cenas, duas emendas, zero fusões. — **O castelo branco** — Ato III. O voo termina na torre de menagem e oferece repetir. Três cenas, duas emendas, zero fusões.

Five Realms — Portão ao luar — Primeiro de cinco reinos. O mergulho começa fora do arco e passa por dentro: o portal é um lugar por onde a câmera realmente vai. — **Portão ao luar** — Primeiro de cinco reinos. O mergulho começa fora do arco e passa por dentro: o portal é um lugar por onde a câmera realmente vai.

Five Realms — Caminho de bambu — Segundo reino. A ligação deixa o portão para trás em vez de dissolver para a próxima imagem. — **Caminho de bambu** — Segundo reino. A ligação deixa o portão para trás em vez de dissolver para a próxima imagem.

Five Realms — Falésias acima do mar de nuvens — Terceiro reino. O texto e as linhas de dados continuam legíveis enquanto a câmera sobe pelas nuvens. — **Falésias acima do mar de nuvens** — Terceiro reino. O texto e as linhas de dados continuam legíveis enquanto a câmera sobe pelas nuvens.

Homer’s Odyssey — Ítaca: a partida — Nove cenas saídas de uma única imagem-mestra: o porto, os navios e a luz pertencem ao mesmo mundo. — **Ítaca: a partida** — Nove cenas saídas de uma única imagem-mestra: o porto, os navios e a luz pertencem ao mesmo mundo.

Homer’s Odyssey — Troia: o cavalo — Segunda cena. A ligação desde o porto é um clipe gerado, não um fundido: o fogo chega antes de você notar a troca. — **Troia: o cavalo** — Segunda cena. A ligação desde o porto é um clipe gerado, não um fundido: o fogo chega antes de você notar a troca.

Homer’s Odyssey — O mar cor de vinho — Terceira cena. Os pontos de navegação pulam entre cenas; a roda continua passando por cada quadro do meio. — **O mar cor de vinho** — Terceira cena. Os pontos de navegação pulam entre cenas; a roda continua passando por cada quadro do meio.

LIVE PROOF

Veja ao vivo.

Abra o work e use aqui.

Um site de scroll é um voo, não um slideshow.

O Studio gera o mundo, uma imagem 16:9 por cena e os clipes de câmera que levam você de uma à outra. A página entregue é HTML puro e JavaScript nativo: a posição do scroll define o tempo do vídeo, então roda no celular, não precisa de framework e pesa como três vídeos curtos.

Emendas, não cortes — Cada ligação é gerada a partir do último quadro de um clipe e do primeiro do seguinte: a junção é idêntica, não uma fusão.
Um só visual em todas as cenas — Cada imagem de cena deriva de uma imagem-mestra, então o porto da cena um é o mesmo porto da cena três.
Uma página, não um vídeo — Você recebe uma URL publicada para abrir, forkear e enviar. Títulos de cena, antetítulos, linhas de dados e rótulos de navegação são HTML editável.

O que perguntam antes de começar.

O que é um site com animação no scroll?

Uma página em que o scroll não só desce a página: ele conduz uma câmera. Cada posição de scroll é um quadro de vídeo, então o visitante atravessa a cena no próprio ritmo em vez de assistir a um clipe.

Preciso de GSAP ou Three.js?

Não. O motor é JavaScript puro que percorre clipes pré-renderizados conforme a posição do scroll. Dá para encaixar num site com GSAP ou Next.js, mas nada aqui exige os dois.

Com quantas cenas começar?

Três. São cerca de 25 MB de vídeo em 16:9: carrega rápido e já se lê como uma viagem. Cada cena extra soma dois clipes, uns 9 MB a mais.

Funciona no celular?

Funciona. Telas pequenas recebem uma versão 640×360 e o percurso segue o scroll do toque; os clipes pesados de desktop não carregam ali.

O que uma construção envolve?

Três imagens, três mergulhos e duas ligações: oito peças geradas. Peça ao Studio o número de clipes e o modelo antes de começar, porque o vídeo é a parte lenta e paga.

Dá para editar os textos depois?

Dá. Títulos de cena, antetítulos, linhas de dados e rótulos de navegação são HTML comum na página publicada. Muda as palavras sem re-renderizar um quadro.

E se uma geração falhar?

A construção para e diz qual clipe falhou. Não preenche o buraco com arte de reserva: uma cena falsa quebra a emenda e, com ela, a ilusão.

Posso usar uma IP existente ou minha própria arte?

Pode. As cenas podem derivar de uma imagem de referência, e os mundos desta página foram construídos dentro de mundos de IP existentes. Traga uma folha de personagem ou um key visual se o visual tiver que combinar com algo.

Dê três paradas a um só lugar.

O Studio gera as cenas, os mergulhos e as emendas, e publica uma página que você rola e envia. Comece pelo porto abaixo ou escreva seu próprio lugar.

Criar o mercado de Liyue