Como ele é
Lembra a página de lançamento de um fone sem fio. Em telas largas, à direita, uma cápsula alongada com o topo na cor da marca, uma faixa escura com grade de som, uma faixa verde e uma ponta prateada gira sobre uma sombra suave no chão, com o brilho correndo pela superfície. Conforme você rola, ela vai assentando, as quatro peças se afastam no ar e linhas finas apontam cada uma com o nome da parte; depois, tudo volta ao lugar. À esquerda, quatro blocos de texto com rótulo, título e frase curta entram e saem em etapas, e o movimento segue a rolagem com uma inércia leve.
Você pode estar procurando isto se pediu algo assim
- aquele efeito de site da Apple em que o produto gira enquanto você rola
- mostrar o produto se desmontando em peças conforme desce a página
- animação de lançamento tipo AirPods sem precisar gravar vídeo
- seção que explica as partes do produto com setinhas apontando
- produto girando na tela com textos que mudam a cada etapa da rolagem
- página de produto com cara de lançamento caro
Também chamado de
- scroll video
- vista explodida
- exploded view
- scroll sequence
- animação de produto no scroll
- scroll-driven product animation
- sequência de lançamento
Quando usar
- Página de lançamento de produto físico ou de hardware
- Seção que explica as camadas de um serviço ou de uma tecnologia
- Storytelling de engenharia, mostrando cada peça e sua função
- Apresentação de produto em evento ou pitch, conduzida pela rolagem
Quando evitar
- Quando o produto real precisa aparecer: o desenho padrão é uma cápsula de áudio genérica, e trocar exige adaptar o código
- Páginas em que a pessoa precisa chegar rápido a preço e compra, sem atravessar uma sequência longa de rolagem
Como pedir para a sua IA
Crie uma seção de lançamento no estilo de página de fone sem fio: o produto desenhado em Canvas gira e se desmonta conforme a rolagem, com textos em etapas, rótulos apontando as peças, cores da minha marca, pausa fora da tela e poses estáticas para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Maquete
Maquete precisa de vídeo ou de sequência de imagens?
Não. Maquete desenha cada quadro em Canvas 2D a partir da rolagem, com luz, sombra e reflexo calculados na hora, então não há arquivo pesado para baixar, e o desenho para quando a seção sai da tela. A contrapartida é que o produto é uma cápsula de áudio genérica; para mostrar outro, peça à IA para adaptar o desenho.
Dá para trocar os textos e as cores de Maquete?
As cores, sim: Maquete recebe por props a cor da carcaça, dos textos e do fundo, além da marca gravada no produto, e o prompt do THM Componentes orienta a IA a usar os tokens do projeto. Os quatro passos de texto e os rótulos das peças ficam numa lista dentro do componente, então peça à IA para trocar esses textos pelos seus.
Maquete respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativa, Maquete não anima: mostra três poses estáticas lado a lado, com o produto montado, em partes e pronto, com os passos de texto listados abaixo. No Nuxt, o prompt do THM Componentes pede para colocar o componente dentro de ClientOnly, com uma imagem ou cor de reserva, e carregar sob demanda.
