# Cavalete A product screen that starts tilted back and turns to face you as the page scrolls, with the headline rising. > Cavalete is a THM Componentes component that reveals a product screen as people scroll: a card with a dark frame, like a monitor, starts tilted back and straightens in 3D until it faces the viewer, while the headline above rises. It suits showing an app or dashboard screenshot on a landing page. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Scroll - URL: https://vibecode.thmtecnologia.com/en/components/cavalete/ ## What it looks like Imagine a laptop on a desk with its screen tipped back, being lifted upright as you scroll. The content sits inside a large card with deeply rounded corners, a thick gray border and a near-black bezel, like a monitor frame, plus a long soft shadow underneath. At the start of the section the card leans back; as the page goes down it straightens until it faces you, and the headline above rises up to 100 pixels. On desktop the card shrinks slightly; on phones it starts smaller and grows a little. The inner screen is light gray in the light theme and graphite in the dark one. ## You may be looking for this if you asked for something like - “an app screenshot that straightens up as I scroll” - “a product screen lying back that lifts with the scroll” - “that effect where the screen rises like a laptop opening” - “show my SaaS dashboard with a 3D effect on scroll” - “a hero with a tilted image of the app that becomes flat” - “reveal the product mockup as people scroll down” - “a scroll effect to present my app like a product launch” ## Also known as 3D mockup on scroll, 3D scroll effect, scroll animation, tilt on scroll, perspective scroll effect, scroll-driven hero ## When to use - A SaaS hero that shows the product dashboard right below the headline - An app launch page with a large screenshot of the main screen - A features page that presents the interface before the details - Presenting a website or system redesign ## When to avoid - Short pages, since the section is tall, from 960 to 1,280 pixels, and needs scrolling - Small or low-resolution screenshots, which look poor in such a large card ## How to ask your AI ```text Create a scroll effect where my app screen sits in a card with a dark frame, tilted back, and straightens in 3D as the page scrolls. Put it in the hero, with an optimized image, no jumps on phones and a still version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Cavalete ### Does Cavalete work in Nuxt with SSR? With one precaution. Cavalete reads the window object during script setup, which fails when Nuxt renders the page on the server. Wrap the component in ClientOnly, as the catalog does in its demos, or ask your AI to move that access into onMounted. ### Does Cavalete slow down scrolling? Barely. Cavalete only changes CSS tilt, scale and offset transforms based on the scroll position, with no canvas or WebGL, which is why it is rated Light in THM Componentes. The image inside the card is what weighs: use an optimized screenshot and compare LCP before and after. ### How does Cavalete look on phones? On screens up to 768 pixels wide, Cavalete uses a different scale: the card starts at 70% of its size and grows to 90% while it straightens, and the section is shorter, at 960 pixels. The tilt and the rising headline stay the same, and the effect follows finger scrolling. ## Related components - [Postigo](https://vibecode.thmtecnologia.com/en/components/postigo/): A Safari window drawn in SVG, with an address bar and your site screenshot filling the page. - [Maquete](https://vibecode.thmtecnologia.com/en/components/maquete/): A product drawn in real time that spins, splits into parts and snaps back together as you scroll. - [Roteiro](https://vibecode.thmtecnologia.com/en/components/roteiro/): A pinned image beside the text that swaps, zooms or crops as each part of the story comes into focus. - [Estojo](https://vibecode.thmtecnologia.com/en/components/estojo/): An iPhone drawn in SVG, with the island at the top and your app screenshot filling the screen. - [Balsa](https://vibecode.thmtecnologia.com/en/components/balsa/): Scroll down and panels with photos and large headlines slide sideways, with a progress bar along the bottom. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).