Toast de rasca y gana
Un boleto con capa plateada que se rasca de verdad con el dedo o el ratón; al despejar la mitad aparece el premio entero.
Ajustes
Código
<div class="uvq09-scr"><button type="button" class="fire">Otro boleto</button><div class="tt" role="status"><div class="hd"><b>Rasca y descubre tu premio</b><button type="button" class="rv">Revelar</button></div><div class="tk"><p class="pz" aria-hidden="true"><span>Envío gratis en tu próximo pedido</span><small>Código RASCA-7Q2</small></p><canvas aria-hidden="true"></canvas></div><small class="hn">Pasa el dedo o el ratón por la zona plateada</small></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Los rasca y gana convierten un descuento en un pequeño juego, y este se rasca de verdad. La capa plateada se pinta en un canvas, cada trazo del puntero la borra con la composición destination-out y un muestreo ligero de los píxeles detecta cuándo falta la mitad, desvanece el resto y destaca el premio. Un botón Revelar da el mismo resultado con teclado o lector de pantalla.
El color principal es el del premio y el secundario el del boleto. Cambia el grosor del trazo y el umbral de descubrimiento en el script y sustituye el código por un cupón real de tu sistema. Encaja en tiendas, boletines y programas de fidelidad.