# 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. > Cavalete é um componente do THM Componentes para revelar a tela de um produto com a rolagem: um cartão com moldura escura, como um monitor, começa inclinado para trás e se endireita em 3D até ficar de frente, enquanto o título acima sobe. Serve para mostrar o print do app ou do painel numa landing page. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/cavalete/ ## Como ele é Imagine um notebook sobre a mesa com a tela tombada para trás, que alguém vai levantando enquanto você rola a página. O conteúdo fica dentro de um cartão grande de cantos bem arredondados, com borda cinza grossa e moldura quase preta, como a de um monitor, e uma sombra longa e suave por baixo. No começo da seção, o cartão aparece inclinado para trás; conforme a página desce, ele se endireita até ficar de frente, e o título acima sobe até 100 pixels. No desktop, o cartão encolhe de leve; no celular, começa menor e cresce um pouco. A tela interna é cinza-clara no tema claro e grafite no escuro. ## Você pode estar procurando isto se pediu algo assim - “print do app que se endireita quando rolo a página” - “tela do produto deitada que vai levantando com o scroll” - “aquele efeito de tela que sobe, tipo notebook abrindo” - “mostrar o painel do meu SaaS com efeito 3D ao rolar” - “hero com a imagem do sistema inclinada que fica reta” - “revelar o mockup do produto conforme a pessoa desce” - “efeito de scroll para apresentar meu app com cara de lançamento” ## Também chamado de mockup 3D no scroll, scroll 3D, efeito de rolagem 3D, scroll animation, tela inclinada no scroll, 3D tilt on scroll, hero com print inclinado ## Quando usar - Hero de SaaS que mostra o painel do produto logo abaixo do título - Landing de lançamento de app com um print grande da tela principal - Página de recursos que apresenta a interface antes dos detalhes - Apresentação de redesign de site ou de sistema ## Quando evitar - Páginas curtas, já que a seção é alta, de 960 a 1.280 pixels, e exige rolagem - Prints pequenos ou de baixa resolução, que ficam ruins num cartão tão grande ## Como pedir para a sua IA ```text Crie um efeito de rolagem em que a tela do meu app aparece num cartão com moldura escura, inclinado para trás, e se endireita em 3D conforme a página desce. Coloque no hero, com imagem otimizada, sem pulos no celular e versão parada para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Cavalete ### Cavalete funciona no Nuxt com SSR? Com um cuidado. Cavalete lê o objeto window já na configuração do script, o que falha quando o Nuxt renderiza a página no servidor. Envolva o componente em ClientOnly, como o catálogo faz nas demonstrações, ou peça à IA para mover esse acesso para dentro do onMounted. ### Cavalete pesa na rolagem? Pouco. Cavalete só muda transformações CSS de inclinação, escala e deslocamento a partir da posição da rolagem, sem canvas nem WebGL, e por isso tem peso Leve no THM Componentes. O que mais pesa é a imagem dentro do cartão: use um print otimizado e compare o LCP antes e depois. ### Como fica Cavalete no celular? Em telas de até 768 pixels, Cavalete usa outra escala: o cartão começa em 70% do tamanho e cresce até 90% enquanto se endireita, e a seção fica mais baixa, com 960 pixels. A inclinação e a subida do título continuam iguais, e o efeito acompanha a rolagem com o dedo. ## Componentes relacionados - [Postigo](https://vibecode.thmtecnologia.com/componentes/postigo/): Uma janela do Safari desenhada em SVG, com barra de endereço e o print do seu site ocupando a página. - [Maquete](https://vibecode.thmtecnologia.com/componentes/maquete/): Um produto desenhado em tempo real que gira, se separa em peças e volta a se montar conforme você rola. - [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. - [Estojo](https://vibecode.thmtecnologia.com/componentes/estojo/): Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela. - [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. --- 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.