# Maquete Um produto desenhado em tempo real que gira, se separa em peças e volta a se montar conforme você rola. > Maquete é um componente exclusivo do THM Componentes que recria a apresentação de produto das páginas de lançamento de fones: uma cápsula desenhada em Canvas gira, se separa em peças com rótulos apontando cada parte e volta a se montar conforme a rolagem, com textos em etapas. Não usa vídeo nem quadros gravados e serve para lançamentos. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Rolagem, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/maquete/ ## 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 ```text 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. ## Componentes relacionados - [Roteiro](https://vibecode.thmtecnologia.com/componentes/roteiro/): Uma imagem fixa ao lado do texto que troca, aproxima ou recorta conforme cada parte da história entra em foco. - [Balsa](https://vibecode.thmtecnologia.com/componentes/balsa/): Você rola para baixo e painéis com fotos e títulos grandes deslizam para o lado, com uma barra de progresso. - [Provador](https://vibecode.thmtecnologia.com/componentes/provador/): Uma garrafa em 3D que gira com o dedo ou o mouse, troca de cor e acabamento e atualiza o preço na hora. - [Cavalete](https://vibecode.thmtecnologia.com/componentes/cavalete/): Uma tela de produto que começa inclinada para trás e fica de frente enquanto a página rola, com o título subindo. - [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.