What it looks like
It is a lottery scratch card brought to the screen. In the demo, a square with rounded corners is covered by a lilac, pink and peach gradient. The cursor turns into a white circle with a black outline, like a coin; pressing and dragging opens transparent circles 60 pixels wide, showing what lies underneath, such as a party emoji. On release, the component measures how much has been scratched: from 50% on, the rest of the layer vanishes at once and the card gives a quick shake, twisting one way and the other.
You may be looking for this if you asked for something like
- a scratch card on my site to reveal a discount coupon
- a card people scratch with their finger to see the prize
- a scratch effect to uncover a hidden offer
- a little giveaway game for a Black Friday campaign
- reveal a discount code in a fun way
- that lottery-style scratch card, but on a phone
Also known as
- scratch card
- scratch-off coupon
- scratch-off effect
- scratch and win
- scratch and reveal
- lottery scratch card
When to use
- Revealing a discount coupon in a campaign or offer page
- Giveaways, freebies and instant prizes in marketing campaigns
- A surprise reveal in an invitation, birthday or launch
- Light gamification in loyalty apps and rewards programs
When to avoid
- Essential information, since there is no way to scratch with the keyboard
- Fluid layouts on small screens, because the size is fixed in pixels
How to ask your AI
I want a scratch card on my campaign page that reveals a coupon: people scratch it with the mouse or a finger, and once half is scratched the layer disappears and the coupon shows, in my brand colors, with a keyboard-friendly reveal button and a version without animation.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Garimpo
Does Garimpo work on phones?
Yes. Garimpo responds to touch: placing a finger on the card and dragging scratches the layer, just as the mouse does. Because the code does not block page scrolling during the gesture, test on a phone whether the screen scrolls along and, if needed, ask your AI to lock scrolling only over the card.
How do I know when someone finishes scratching Garimpo?
Garimpo emits a complete event when the scratched area reaches the minimum set in minScratchPercentage, 50% by default. At that moment the layer clears completely and the card shakes; you can use the event to show the coupon code, record the conversion or fire confetti.
Is Garimpo accessible to keyboard and screen reader users?
Partly. The hidden content sits in the HTML under the layer, so screen readers read it directly, even without scratching. Scratching itself depends on a mouse or touch, with no keyboard option, so for important information add a button next to Garimpo that shows the content at once.
