# Camafeu A card that tilts with the mouse and lifts its image, title and buttons into layers of depth. > Camafeu is a THM Componentes component that turns a regular card into a perspective piece: it tilts with the mouse, and each element inside, like the image, title and buttons, moves toward the viewer at a different depth. It is built with CSS 3D transforms, no WebGL, and works well for product showcases, pricing plans and case studies. - Category: Cards and surfaces - 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: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/camafeu/ ## What it looks like The card sits still, facing you, until the mouse enters. From then on it tilts slightly with the cursor position, like a board balanced on a center point, and each element inside lifts off the surface toward the viewer at different heights: in the demo, the image comes out the most, the description and title a little less and the buttons barely at all. It feels like layers floating over the card. When the mouse leaves, everything settles back flat with a smooth transition. In the demo, the card is very light gray in light mode and black in dark mode. ## You may be looking for this if you asked for something like - “a card that moves in 3D when I hover over it” - “elements that pop out of the card like they are floating” - “a depth effect on my product card, like layers” - “how do I make a card tilt with the cursor on my pricing page” - “make my pricing cards look premium without heavy 3D” - “image popping out of the card on hover” ## Also known as 3D card, tilt card, perspective card, parallax card, 3D hover effect, layered depth card ## When to use - A featured product or pricing card on a landing page - A showcase of case studies or portfolio projects - A launch callout with an image and a button - Feature sections with a few large cards ## When to avoid - Audiences that browse almost only on phones, with no hover to show the effect - Grids with many cards side by side, where everything tilting becomes noise ## How to ask your AI ```text Create a 3D perspective card for the featured plan on my pricing page: it tilts with the mouse and lifts the image, title and button to different depths, settles flat when the mouse leaves, with a static version for reduced motion and a layout that works without hover on phones. ``` 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 Camafeu ### Does Camafeu work on phones? Not in the same way. Camafeu reacts to mouse events, entering, moving and leaving, and touch screens have no hover to follow. The card stays readable and clickable, just without the tilt. If the effect matters on mobile, ask your AI for an alternative, such as lifting the layers when the card scrolls into view. ### How do I choose how far each element lifts in Camafeu? Each CardItem in Camafeu takes translateZ, which sets how far it moves toward the viewer, plus X and Y offsets and rotations on all three axes. In the demo, the image lifts 100 px, the description 60, the title 50 and the buttons 20. Inside a plain div, add transform-style preserve-3d so the depth works. ### Does Camafeu respect reduced motion settings? The original component always tilts and lifts its layers on hover. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion, which is simple with Camafeu: keep the card flat and the layers in place, with no rotation. ## Related components - [Furta-cor](https://vibecode.thmtecnologia.com/en/components/furta-cor/): A card with artwork that tilts in 3D under the mouse and shimmers with a rainbow sheen, like a rare trading card. - [Convite](https://vibecode.thmtecnologia.com/en/components/convite/): A card that lifts, tilts in 3D and catches a glint of light that follows the cursor, over a deep shadow. - [Paetê](https://vibecode.thmtecnologia.com/en/components/paete/): A dark card that catches a light glare and a hologram shimmer that follow the mouse, with a slight tilt. - [Luar](https://vibecode.thmtecnologia.com/en/components/luar/): A card with a soft circular glow that follows the cursor and fades when the mouse leaves. - [Valete](https://vibecode.thmtecnologia.com/en/components/valete/): A card that turns 180 degrees on hover to show its back side, flipping sideways or top to 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).