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