# Camafeu Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. > Camafeu é um componente do THM Componentes que transforma um card comum numa peça em perspectiva: ele inclina acompanhando o mouse, e cada elemento, como imagem, título e botões, avança em direção a quem olha numa profundidade diferente. Usa transformações CSS 3D, sem WebGL, e funciona bem em vitrines de produto, planos e cases. - 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 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/camafeu/ ## 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 ```text 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. ## Componentes relacionados - [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. - [Convite](https://vibecode.thmtecnologia.com/componentes/convite/): Card que se ergue, inclina em 3D e ganha um reflexo de luz seguindo o cursor, sobre uma sombra profunda. - [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. - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. - [Valete](https://vibecode.thmtecnologia.com/componentes/valete/): Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo. --- 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.