# Convite

Card que se ergue, inclina em 3D e ganha um reflexo de luz seguindo o cursor, sobre uma sombra profunda.

> Convite é um componente do THM Componentes que dá profundidade a qualquer conteúdo: no hover, o card aumenta 5%, se aproxima de quem olha e inclina até 17,5 graus seguindo o cursor, com movimento de mola e um reflexo de luz por cima. Serve para convites, mockups de produto e destaques de app.

- Categoria: Cartões e superfícies
- 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, Motion for Vue
- Interação: Mouse
- URL: https://vibecode.thmtecnologia.com/componentes/convite/

## Como ele é

Imagine um cartão de convite segurado na mão e inclinado contra a luz. Em repouso, ele fica parado, com uma sombra longa e suave por baixo. Quando o cursor entra, o card aumenta 5%, se aproxima de quem olha e passa a inclinar em 3D, até 17,5 graus, acompanhando a posição do mouse, enquanto um brilho branco e difuso desliza sobre a superfície. Tudo se move com molas, então o gesto parece macio. Ao sair, ele volta suavemente ao lugar. Na demo, o conteúdo é um convite em preto e branco com foto e código.

## Você pode estar procurando isto se pediu algo assim

- “card que inclina para o lado em que o mouse está”
- “efeito 3D de cartão flutuando quando passo o cursor”
- “convite digital que parece um cartão de verdade na mão”
- “mostrar o print do app num card que se mexe com o mouse”
- “card com brilho de luz e sombra que dá profundidade”
- “aquele card inclinado do site do Perplexity Comet”
- “deixar o cartão de convite com cara de app caro”

## Também chamado de

tilt card, card 3D, card inclinável, card flutuante, 3D hover card, efeito parallax no card

## Quando usar

- Convite, ingresso ou cartão de acesso antecipado em página de lançamento
- Mockup de app ou print de produto em destaque no hero
- Cartão de membro, plano ou cupom que deve parecer físico
- Vitrine com um ou dois cards principais, sem disputar atenção

## Quando evitar

- Público que acessa mais pelo celular: o efeito ignora o toque e o card fica parado
- Grades com dezenas de cards, em que cada um inclinando cansa a vista

## Como pedir para a sua IA

```text
Crie um card com efeito tilt 3D: ao passar o mouse, ele cresce um pouco, inclina seguindo o cursor com movimento de mola e ganha um reflexo de luz. Quero sombra em camadas, versão parada para quem prefere menos movimento e o card estático no celular, sem pesar no INP.
```

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 Convite

### Convite funciona no celular?

Convite ignora o toque de propósito: em celulares e tablets, o card aparece com a sombra, mas não inclina nem ganha o reflexo, então a rolagem com o dedo nunca o mexe por engano. Se quiser algum movimento no celular, peça à IA uma animação leve de entrada no lugar da inclinação.

### Dá para ajustar a inclinação de Convite?

Sim. Convite tem duas propriedades: rotateDepth define a inclinação máxima, 17,5 graus por padrão, e translateDepth define o deslocamento máximo, 20 pixels. Valores menores deixam o efeito discreto em cards com muito texto, e como o conteúdo vai dentro do componente, serve qualquer card do seu projeto.

### Convite respeita quem prefere menos movimento?

O componente original inclina sempre que o mouse passa. O prompt do THM Componentes pede à IA uma versão estática para quem ativa movimento reduzido no sistema; em Convite, isso significa manter a sombra e desligar a inclinação e o reflexo nesse caso.

## Componentes relacionados

- [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade.
- [Furta-cor](https://vibecode.thmtecnologia.com/componentes/furta-cor/): Cartão com arte que inclina em 3D sob o mouse e brilha com reflexo arco-íris, como uma carta colecionável rara.
- [Paetê](https://vibecode.thmtecnologia.com/componentes/paete/): Card escuro que ganha um reflexo de luz e um brilho de holograma que seguem o mouse, com leve inclinação.
- [Diorama](https://vibecode.thmtecnologia.com/componentes/diorama/): Fotos e elementos espalhados que se deslocam em velocidades diferentes conforme o mouse, criando profundidade.
- [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.

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