# Paetê Card escuro que ganha um reflexo de luz e um brilho de holograma que seguem o mouse, com leve inclinação. > Paetê é um componente do THM Componentes que imita o reflexo de um cartão metalizado: ao passar o mouse, surge uma luz branca na posição do cursor e um brilho de holograma em arco-íris, enquanto o card inclina alguns graus. Usa CSS e pouco JavaScript e combina com cartões de membro, certificados e planos premium. - 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/paete/ ## Como ele é Lembra o holograma de um cartão de crédito ou de uma figurinha brilhante. Em repouso, é um card escuro, quase preto, de cantos bem arredondados, na proporção 17 por 21 e com 320 pixels de largura. Quando o cursor entra, aparecem duas camadas por cima: uma luz branca e suave centrada no ponteiro e um brilho metalizado com faixas de arco-íris e listras diagonais que deslizam conforme o mouse anda. O card inclina poucos graus acompanhando o mouse e, ao sair, a luz some e ele volta reto. ## Você pode estar procurando isto se pediu algo assim - “card com brilho de holograma quando passo o mouse” - “efeito de cartão de crédito metalizado refletindo a luz” - “card escuro com reflexo de luz seguindo o cursor” - “aquele brilho de card do site do Linear” - “cartão de membro premium que brilha como figurinha holográfica” - “certificado ou cartão de sócio com reflexo de arco-íris” - “deixar o plano mais caro da página com cara de cartão black” ## Também chamado de reflexo holográfico no hover, card holográfico, holographic card, efeito foil, card com reflexo, shine card, card metalizado ## Quando usar - Cartão de membro, assinatura ou acesso antecipado - Certificado, selo ou conquista em plataforma de cursos - Destaque do plano premium numa tabela de preços - Coleção de cards digitais, ingressos ou figurinhas ## Quando evitar - Cards com muito texto, já que as camadas de brilho atravessam a leitura - Telas com muitos cards lado a lado, em que o efeito perde o destaque - Uso principal no celular, onde o brilho depende do hover ## Como pedir para a sua IA ```text Crie um card com efeito holográfico: no hover, uma luz branca segue o cursor e um brilho metalizado em arco-íris aparece por cima, com leve inclinação 3D. Use as cores da minha marca no fundo do card, mantenha o texto legível e desligue o efeito para quem prefere menos movimento. ``` 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 Paetê ### Paetê deixa o site lento? Não costuma deixar. Paetê usa gradientes, modos de mistura do CSS e um pequeno cálculo da posição do ponteiro, sem WebGL, e tem peso Leve no THM Componentes. Os modos de mistura exigem mais da placa de vídeo que um card comum, então vale comparar o INP antes e depois em páginas com vários cards. ### Dá para colocar foto ou logo em Paetê? Sim. Tudo que você coloca dentro de Paetê aparece por baixo das camadas de brilho: logo, foto ocupando o card inteiro ou título com texto, como mostram as demos. O fundo padrão é quase preto e pode ser trocado por classe, e o prompt do THM Componentes orienta a IA a usar as cores do seu projeto. ### Paetê funciona no celular? O componente Paetê foi feito para o mouse: o brilho e a inclinação dependem de um ponteiro passando por cima. No celular, o efeito depende de como cada navegador trata o toque, e o card pode ficar sem brilho. O prompt do THM Componentes pede teste em mobile; para um brilho que se mova sozinho, peça à IA uma animação leve. ## 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. - [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. - [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. - [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. - [Pavio](https://vibecode.thmtecnologia.com/componentes/pavio/): Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. --- 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.