Como ele é
Lembra uma carta colecionável rara virada contra a luz. O cartão tem proporção de 5 por 7, cantos arredondados e uma arte que ocupa toda a superfície, com um chip dourado no alto e título e subtítulo embaixo, em texto branco. Ao passar o mouse, ele inclina até 14 graus na direção do ponteiro, a imagem desliza um pouco ao contrário, e faixas de arco-íris, pontinhos de glitter e um reflexo branco percorrem a superfície; quanto mais perto da borda, mais forte o foil. Quando o mouse sai, o cartão volta suavemente a ficar reto.
Você pode estar procurando isto se pediu algo assim
- card que inclina e brilha quando passo o mouse
- efeito de carta holográfica tipo Pokémon no meu site
- cartão de membro com brilho arco-íris para a área VIP
- credencial de evento com efeito 3D quando mexe o mouse
- deixar o certificado do curso com cara de cartão premium
- card com reflexo de luz que acompanha o cursor
- efeito de foil iridescente num cartão
Também chamado de
- carta colecionável holográfica
- cartão holográfico
- holographic card
- tilt card
- foil effect
- cartão 3D com reflexo
- iridescent card
Quando usar
- Cartão de membro ou de assinante numa área logada
- Plano premium em destaque numa página de preços
- Certificado de curso ou selo de conquista para compartilhar
- Credencial digital de evento ou ingresso
Quando evitar
- Listas com muitos cartões: o efeito foi pensado para uma peça única em destaque
- Cartões com muito texto, que fica difícil de ler enquanto o cartão inclina
Como pedir para a sua IA
Crie um cartão holográfico para o cartão de membro da área logada: inclinação 3D que segue o ponteiro, com foil iridescente, glitter e reflexo que mudam com o ângulo, funcionando com o dedo no celular e sem inclinação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Furta-cor
Furta-cor funciona no celular?
Sim. Furta-cor desativa a rolagem do navegador sobre o cartão, então arrastar o dedo por cima inclina o cartão e move o brilho, como o mouse faz no computador. Ao tirar o dedo, o cartão volta a ficar reto. Tem peso Leve no THM Componentes, porque usa CSS e pouco JavaScript.
Posso colocar a minha arte e os meus textos em Furta-cor?
Pode. Furta-cor recebe a arte pela prop image e o título e o subtítulo por props; se você precisar de outro layout, o slot padrão substitui todo o conteúdo, e o foil e o reflexo continuam por cima da imagem. Inclinação máxima, intensidade do foil e raio dos cantos também são ajustáveis.
Furta-cor respeita quem prefere menos movimento?
Sim. Com movimento reduzido ativo, Furta-cor não inclina e a imagem não desliza; o cartão fica reto. O foil, o glitter e o reflexo continuam respondendo ao ponteiro, então o efeito holográfico aparece sem o movimento 3D.
