Toast mit Rubbellos
Ein Los mit silberner Schicht, die man wirklich mit Finger oder Maus freirubbelt; ist die Hälfte weg, erscheint der ganze Gewinn.
Einstellungen
Code
<div class="uvq09-scr"><button type="button" class="fire">Noch ein Los</button><div class="tt" role="status"><div class="hd"><b>Rubbeln und Gewinn aufdecken</b><button type="button" class="rv">Aufdecken</button></div><div class="tk"><p class="pz" aria-hidden="true"><span>Kostenloser Versand bei deiner nächsten Bestellung</span><small>Code RASCA-7Q2</small></p><canvas aria-hidden="true"></canvas></div><small class="hn">Fahre mit Finger oder Maus über die Silberfläche</small></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Rubbellose machen aus einem Rabatt ein kleines Spiel, und dieses lässt sich wirklich rubbeln. Die Silberschicht wird auf ein Canvas gemalt, jeder Zeigerstrich löscht sie per destination-out, und eine sparsame Stichprobe der Pixel erkennt, wann etwa die Hälfte fehlt, blendet den Rest aus und hebt den Gewinn hervor. Ein Button Aufdecken liefert Tastatur und Screenreader dasselbe Ergebnis.
Die Hauptfarbe gilt für den Gewinntext, die zweite für das Los darunter. Ändere Pinselbreite und Schwelle im Skript und ersetze die Codezeile durch einen echten Gutschein aus deinem Backend. Passend für Shops, Newsletter und Treueprogramme.