# Garimpo A card covered by a colorful layer that people scratch off with the mouse or a finger to find the prize. > Garimpo is a THM Componentes component that turns a card into a scratch-off: a gradient layer covers the content, and people scratch it away with the mouse or a finger. Once half of the area is clear, the layer disappears, the card shakes and an event notifies your code. It suits coupons, giveaways and offers. - Category: Special effects - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, Motion for Vue - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/garimpo/ ## 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 ```text 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. ## Related components - [Folia](https://vibecode.thmtecnologia.com/en/components/folia/): A burst of colorful paper bits shoots up and falls across the screen when someone completes a purchase or a goal. - [Avesso](https://vibecode.thmtecnologia.com/en/components/avesso/): Two phrases in the same spot: a vertical line follows the mouse and shows the other phrase on one side. - [Pupila](https://vibecode.thmtecnologia.com/en/components/pupila/): A circle follows the mouse and, over the headline, grows to reveal a second hidden message. - [Valete](https://vibecode.thmtecnologia.com/en/components/valete/): A card that turns 180 degrees on hover to show its back side, flipping sideways or top to bottom. - [Brasa](https://vibecode.thmtecnologia.com/en/components/brasa/): The photo crumbles into dust from the bottom up, with an orange edge that glows like burning paper. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).