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.
-
Vídeo com IA aberta, em GPU gratuita
Os movimentos de câmera saem do Wan 2.1 (14B), um modelo de vídeo aberto, rodando em GPUs gratuitas do Kaggle, com uma versão destilada que gera em 4 passos.
-
Costura sem cortes
Cada transição começa no último frame da cena anterior e termina no primeiro frame da próxima. As emendas batem pixel a pixel.
-
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.
Uma transição em duas metades.
O modelo de vídeo aceita só a imagem de partida, não a de chegada. Sem cuidado, cada transição terminaria num quadro diferente do início da cena seguinte, e o visitante veria um salto. A solução foi gerar cada transição em duas metades:
As duas pontas ficam travadas no frame exato das cenas vizinhas, e a única emenda fica no meio do voo, no alto, onde um dissolve de meio segundo passa despercebido.
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 →