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
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.
