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