Uma marca contada pelo scroll.
Uma landing page em que a rolagem conduz a câmera: o visitante sai do cafezal e chega à xícara num único voo, sem cortes, por um mundo em miniatura.
- Tipo
- Landing page imersiva
- Marca
- Fictícia (conceito)
- Entrega
- HTML, CSS e JS puros
- Visual
- Gerado por IA, dirigido à mão
Mostrar o caminho, não só o produto.
Marcas de café especial vendem uma história: quem planta, como torra, de onde vem. Em vez de contar essa história num bloco de texto, o site faz o visitante percorrê-la. Cada etapa da rolagem é uma cena do caminho do grão.
A técnica é a mesma das páginas de produto da Apple: o vídeo já está pronto e a rolagem controla o tempo dele. A câmera se move de verdade, e quem visita decide a velocidade. Dá até para voltar.
Do briefing ao voo contínuo.
-
Roteiro e direção de arte
Seis cenas seguindo o caminho do grão, com o mesmo texto de estilo em todas as imagens (diorama de argila, luz quente, paleta da marca). É isso que faz as cenas parecerem um único mundo.
-
Cenas geradas e revisadas
Cada cena gerada com FLUX e conferida lado a lado: mesmo ângulo, mesma luz, mesma paleta. Uma cena fora do tom é refeita antes de seguir.
-
Um vídeo por trecho, em 1080p
Cada trecho do voo é um vídeo do Seedance 2.0 em 1080p e 24 quadros por segundo: começa numa cena, entra nela e segue até a próxima. Cada vídeo foi conferido quadro a quadro antes de entrar no site.
-
Costura sem cortes
Cada vídeo começa exatamente na imagem de uma cena e termina exatamente na imagem da seguinte. O fim de um é o começo do outro, então as emendas não aparecem.
-
Motor de scroll leve
JavaScript puro, sem framework: carrega os vídeos sob demanda, sincroniza o tempo com a rolagem e cai para as imagens estáticas quando o visitante prefere menos movimento.
O fim de um vídeo é o começo do próximo.
Num site em que a rolagem conduz a câmera, qualquer diferença entre o último quadro de um vídeo e o primeiro do seguinte aparece como um salto. Por isso cada vídeo é gerado com duas âncoras: a imagem da cena de partida e a imagem da cena de chegada.
Seis vídeos encadeados assim formam um voo único, do cafezal à xícara, sem nenhum corte entre as cenas.
Feito para ser repetível.
Quer um mundo desses para a sua marca?
O mesmo processo serve para qualquer negócio que tenha um caminho para mostrar: da fábrica ao cliente, do projeto à obra, da consulta ao resultado.
Conversar sobre um projeto →