Toast de ticket à gratter
Un ticket avec une couche argentée qu'on gratte vraiment du doigt ou à la souris ; à moitié dégagé, le lot apparaît en entier.
Réglages
Code
<div class="uvq09-scr"><button type="button" class="fire">Un autre ticket</button><div class="tt" role="status"><div class="hd"><b>Gratte pour découvrir ton lot</b><button type="button" class="rv">Révéler</button></div><div class="tk"><p class="pz" aria-hidden="true"><span>Livraison gratuite sur ta prochaine commande</span><small>Code RASCA-7Q2</small></p><canvas aria-hidden="true"></canvas></div><small class="hn">Passe le doigt ou la souris sur la zone argentée</small></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Voir tout : NotificationsOù l’utiliser
Les tickets à gratter transforment une remise en petit jeu, et celui-ci se gratte pour de vrai. La couche argentée est peinte sur un canvas, chaque trait du pointeur l'efface avec la composition destination-out et un échantillonnage léger des pixels détecte quand la moitié a disparu, puis estompe le reste et met le lot en avant. Un bouton Révéler offre le même résultat au clavier.
La couleur principale sert au texte du lot et la secondaire au ticket. Change la largeur du trait et le seuil de découverte dans le script, et remplace la ligne du code par un vrai bon de réduction de ton système. Pour les boutiques, les newsletters et la fidélité.