What it looks like
It looks like a rare trading card turned under a light. The card has a 5 by 7 ratio, rounded corners and artwork filling the surface, with a gold chip at the top and a title and subtitle at the bottom in white. As the mouse moves over it, it tilts up to 14 degrees toward the pointer, the image slides slightly the other way, and rainbow bands, glitter specks and a white glare sweep across; the closer to the edge, the stronger the foil. When the mouse leaves, the card eases back flat.
You may be looking for this if you asked for something like
- a card that tilts and shines when I hover
- that holographic shine, like a rare Pokémon card, on my site
- a member card with a rainbow shimmer for the VIP area
- an event badge with a 3D effect when you move the mouse
- make the course certificate look like a premium card
- a card with a light reflection that follows the cursor
- an iridescent foil effect on a card
Also known as
- trading card shine effect
- holographic card
- tilt card
- foil card effect
- iridescent card
- 3D hover card
When to use
- A member or subscriber card in a logged-in area
- A featured premium plan on a pricing page
- A course certificate or achievement badge meant to be shared
- A digital event pass or ticket
When to avoid
- Lists of many cards: the effect is meant for a single featured piece
- Cards with a lot of text, which gets hard to read while the card tilts
How to ask your AI
Create a holographic card for the member card in the logged-in area: a 3D tilt that follows the pointer, with iridescent foil, glitter and a glare that change with the angle, working with a finger on phones and with no tilt for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Furta-cor
Does Furta-cor work on phones?
Yes. Furta-cor turns off browser scrolling over the card, so dragging a finger across it tilts the card and moves the shine, just like the mouse does on desktop. When the finger lifts, the card returns flat. It is rated Light in THM Componentes, since it relies on CSS and very little JavaScript.
Can I use my own artwork and text in Furta-cor?
Yes. Furta-cor takes the artwork through the image prop and the title and subtitle through props; if you need another layout, the default slot replaces all the content while the foil and glare stay over the image. Maximum tilt, foil intensity and corner radius are adjustable too.
Does Furta-cor respect reduced motion settings?
Yes. With reduced motion turned on, Furta-cor does not tilt and the image does not slide; the card stays flat. The foil, glitter and glare still respond to the pointer, so the holographic look remains without the 3D movement.
