Como ele é
O cartão fica parado e de frente até o mouse entrar. A partir daí, ele inclina de leve acompanhando a posição do cursor, como uma placa apoiada num ponto central, e cada elemento de dentro se descola do fundo e avança em direção a quem olha, em alturas diferentes: na demo, a imagem sai mais, a descrição e o título um pouco menos e os botões quase nada. A sensação é de camadas flutuando sobre o cartão. Quando o mouse sai, tudo volta ao plano com uma transição suave. Na demo, o cartão é cinza bem claro no modo claro e preto no escuro.
Você pode estar procurando isto se pediu algo assim
- card que mexe em 3D quando passo o mouse por cima
- elementos que saltam do card como se estivessem flutuando
- efeito de profundidade no card do produto, tipo camadas
- cartão que inclina seguindo o cursor na página de preços
- deixar a vitrine de planos com cara de site caro sem usar 3D pesado
- card com imagem que sai para fora no hover
Também chamado de
- card 3D
- 3D card
- tilt card
- card em perspectiva
- perspective card
- efeito de profundidade
- parallax card
Quando usar
- Card de produto ou de plano em destaque numa landing page
- Vitrine de cases ou projetos de portfólio
- Chamada para um lançamento com imagem e botão
- Seções de recursos com poucos cartões grandes
Quando evitar
- Público que acessa quase só pelo celular, sem hover para mostrar o efeito
- Grades com muitos cartões lado a lado, em que tudo inclinando vira ruído
Como pedir para a sua IA
Crie um card 3D em perspectiva para o plano em destaque da página de preços: inclina seguindo o mouse e eleva imagem, título e botão em profundidades diferentes, volta ao plano ao sair, com versão estática para movimento reduzido e layout que funcione sem hover no celular.
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 Camafeu
Camafeu funciona no celular?
Não da mesma forma. Camafeu reage a eventos de mouse, de entrar, mover e sair, e em telas de toque não há hover para acompanhar. O cartão continua legível e clicável, só sem a inclinação. Se o efeito for importante no celular, peça à IA uma alternativa, como elevar as camadas quando o cartão entra na tela.
Como escolho quanto cada elemento sobe em Camafeu?
Cada CardItem de Camafeu recebe translateZ, que define quanto ele avança em direção a quem olha, além de deslocamentos em X e Y e rotações nos três eixos. Na demo, a imagem sobe 100 px, a descrição 60, o título 50 e os botões 20. Dentro de uma div comum, use transform-style preserve-3d para a profundidade funcionar.
Camafeu respeita quem prefere menos movimento?
O componente original sempre inclina e eleva as camadas no hover. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Camafeu é simples: manter o cartão plano e as camadas no lugar, sem rotação.
