# Garimpo Um cartão coberto por uma camada colorida que a pessoa raspa com o mouse ou o dedo para descobrir o prêmio. > Garimpo é um componente do THM Componentes que transforma um cartão em raspadinha: uma camada em degradê cobre o conteúdo, e a pessoa raspa com o mouse ou com o dedo. Quando metade da área está limpa, a camada some, o cartão balança e um evento avisa o seu código. Serve para cupons, sorteios e ofertas. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, Motion for Vue - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/garimpo/ ## Como ele é É a raspadinha de loteria levada para a tela. Na demo, um quadrado de cantos arredondados aparece coberto por um degradê lilás, rosa e pêssego. O cursor vira um círculo branco com contorno preto, como uma moeda; ao apertar e arrastar, ele abre círculos transparentes de 60 pixels de diâmetro, mostrando o que está por baixo, como um emoji de festa. Ao soltar, o componente mede quanto já foi raspado: a partir de 50%, o resto da camada desaparece de uma vez e o cartão dá uma sacudida rápida, girando para um lado e para o outro. ## Você pode estar procurando isto se pediu algo assim - “raspadinha no site para revelar um cupom de desconto” - “cartão que a pessoa raspa com o dedo para ver o prêmio” - “efeito de raspar para descobrir a oferta escondida” - “joguinho de sorteio para a campanha de Black Friday” - “revelar um código de desconto de um jeito divertido” - “aquele cartão de raspar tipo loteria, mas no celular” ## Também chamado de raspadinha, scratch card, cupom de raspar, scratch-off effect, cartão de raspar, raspe e ganhe, scratch and win ## Quando usar - Revelar cupom de desconto em campanha ou página de oferta - Sorteios, brindes e prêmios instantâneos em ações de marketing - Revelação de surpresa em convite, aniversário ou lançamento - Gamificação leve em apps de fidelidade e programas de pontos ## Quando evitar - Informação essencial, já que não há como raspar pelo teclado - Layouts fluidos em telas pequenas, porque o tamanho é fixo em pixels ## Como pedir para a sua IA ```text Quero um cartão de raspadinha na página da campanha para revelar um cupom: a pessoa raspa com o mouse ou o dedo e, ao chegar à metade, a camada some e o cupom aparece, nas cores da minha marca, com botão para revelar pelo teclado e versão sem animação. ``` 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 Garimpo ### Garimpo funciona no celular? Funciona. Garimpo responde ao toque: encostar o dedo no cartão e arrastar raspa a camada, como acontece com o mouse. Como o código não bloqueia a rolagem da página durante o gesto, vale testar no celular se a tela não desliza junto e, se preciso, pedir à IA que trave a rolagem só sobre o cartão. ### Como saber quando a pessoa terminou de raspar em Garimpo? Garimpo emite o evento complete quando a área raspada atinge o mínimo definido em minScratchPercentage, 50% por padrão. Nesse momento a camada some por inteiro e o cartão balança; você pode usar o evento para mostrar o código do cupom, registrar a conversão ou soltar confete. ### Garimpo é acessível para teclado e leitor de tela? Em parte. O conteúdo escondido fica no HTML por baixo da camada, então leitores de tela o leem direto, mesmo sem raspar. Já raspar depende de mouse ou toque, sem opção pelo teclado; para informações importantes, ofereça junto a Garimpo um botão que mostre o conteúdo de uma vez. ## Componentes relacionados - [Folia](https://vibecode.thmtecnologia.com/componentes/folia/): Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta. - [Avesso](https://vibecode.thmtecnologia.com/componentes/avesso/): Duas frases no mesmo lugar: uma linha vertical segue o mouse e mostra a outra frase de um lado dela. - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [Valete](https://vibecode.thmtecnologia.com/componentes/valete/): Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo. - [Brasa](https://vibecode.thmtecnologia.com/componentes/brasa/): A foto se desfaz em poeira de baixo para cima, com uma borda laranja que brilha como papel queimando. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.