# Convite A card that lifts, tilts in 3D and catches a glint of light that follows the cursor, over a deep shadow. > Convite is a THM Componentes component that adds depth to any content: on hover, the card grows 5 percent, moves toward the viewer and tilts up to 17.5 degrees following the cursor, with spring motion and a glint of light on top. It suits invitations, product mockups and app highlights. - 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, Motion for Vue - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/convite/ ## What it looks like Picture an invitation card held in your hand and tilted against the light. At rest it stays still, with a long, soft shadow underneath. When the cursor enters, the card grows 5 percent, moves toward the viewer and starts tilting in 3D, up to 17.5 degrees, following the mouse position, while a soft white glare glides across the surface. Everything moves on springs, so the gesture feels smooth. When the cursor leaves, the card eases back into place. In the demo, the content is a black and white invitation with a photo and a code. ## You may be looking for this if you asked for something like - “a card that tilts toward wherever my mouse is” - “a floating 3D effect on a card when I hover over it” - “a digital invite that feels like a real card in your hand” - “show my app screenshot on a card that moves with the mouse” - “a card with a light glare and a shadow that adds depth” - “that tilted card from the Perplexity Comet site” - “make the invite card feel like an expensive app” ## Also known as tilt card, 3D tilt card, parallax card, hover tilt effect, 3D hover card, perspective card ## When to use - An invitation, ticket or early access card on a launch page - An app mockup or product screenshot featured in the hero - A membership, plan or coupon card that should feel physical - A showcase with one or two main cards that do not compete for attention ## When to avoid - Audiences that mostly browse on phones: the effect ignores touch and the card stays still - Grids with dozens of cards, where every card tilting gets tiring ## How to ask your AI ```text Create a 3D tilt card: on hover it grows slightly, tilts with the cursor using spring motion and catches a glint of light. I want a layered shadow, a still version for people who prefer reduced motion and a static card on phones that does not hurt INP. ``` 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 Convite ### Does Convite work on phones? Convite ignores touch on purpose: on phones and tablets the card shows with its shadow but does not tilt or catch the glare, so scrolling with a finger never moves it by accident. If you want some motion on phones, ask your AI for a light entrance animation instead of the tilt. ### Can I adjust how much Convite tilts? Yes. Convite has two props: rotateDepth sets the maximum tilt, 17.5 degrees by default, and translateDepth sets the maximum shift, 20 pixels. Lower values keep the effect subtle on text-heavy cards, and since the content goes inside the component, any card in your project works. ### Does Convite respect reduced motion settings? The original component tilts whenever the mouse passes over it. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion; with Convite, that means keeping the shadow and turning off the tilt and the glare in that case. ## Related components - [Camafeu](https://vibecode.thmtecnologia.com/en/components/camafeu/): A card that tilts with the mouse and lifts its image, title and buttons into layers of depth. - [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. - [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. - [Diorama](https://vibecode.thmtecnologia.com/en/components/diorama/): Scattered photos and shapes that shift at different speeds as the mouse moves, creating depth. - [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. --- 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).