Scratch card toast
A ticket with a silver layer you really scratch with a finger or mouse; clear half of it and the whole prize appears.
Settings
Code
<div class="uvq09-scr"><button type="button" class="fire">Another ticket</button><div class="tt" role="status"><div class="hd"><b>Scratch to reveal your prize</b><button type="button" class="rv">Reveal</button></div><div class="tk"><p class="pz" aria-hidden="true"><span>Free shipping on your next order</span><small>Code RASCA-7Q2</small></p><canvas aria-hidden="true"></canvas></div><small class="hn">Rub the silver area with your finger or mouse</small></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Scratch cards turn a discount into a small game, and this one actually scratches. The silver coating is drawn on a canvas, every pointer stroke erases it with destination-out compositing, and a cheap sampling of the pixels detects when about half is gone, then fades the rest and pops the prize. A Reveal button gives keyboard and screen reader users the same result.
The main color is the prize text and the second the ticket underneath. Change the brush width and the reveal threshold in the script, and replace the code line with a real coupon from your backend. Fits shops, newsletters and loyalty programs.