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
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.
