Gratta e scopri

Card, Fisica, TransizioniGSAPImpegnativaPeso compresso: Demo 6,8 KBGSAP 28 KBGratisScarica lo zip

Un biglietto col regalo sotto una lamina d’argento: una moneta la gratta via lungo il suo percorso e i frammenti cadono girando con la gravità; passata la metà, il resto si stacca da solo in una pioggia di frammenti e il regalo salta fuori con un lampo di luce.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The scratch card</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/chivo@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the scratch card: a coin scratches the foil away, flakes fall from it, and past half the rest comes off by
         itself and the gift jumps out -->
    <section class="gift" aria-labelledby="gift-title" data-gift data-autoclic>
      <h2 class="gift__title" id="gift-title">Your welcome gift</h2>
      <div class="ticket" data-ticket>
        <div class="ticket__prize" aria-hidden="true" data-prize>
          <p class="ticket__big" data-big></p>
          <p class="ticket__small" data-small></p>
          <div class="ticket__code">
            <span class="ticket__chip" data-code></span>
            <button class="ticket__copy" type="button" tabindex="-1" data-copy>Copy code</button>
          </div>
        </div>
        <canvas class="ticket__foil" aria-hidden="true" data-foil></canvas>
        <span class="ticket__coin" aria-hidden="true" data-coin></span>
      </div>
      <button class="gift__reveal" type="button" data-reveal>Reveal without scratching</button>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </main>
  <canvas class="flakes" aria-hidden="true" data-flakes></canvas>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

16 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «Gratta e scopri» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco Your welcome gift e un biglietto giallo con le tacche ai lati, coperto da una lamina d’argento a righe sottili con SCRATCH HERE; sotto, Reveal without scratching. Col mouse sulla lamina il cursore diventa una moneta dorata; trascinando (o col dito) la lamina se ne va lungo il percorso con un bordo morbido, e da dove passa la moneta si staccano frammenti d’argento che cadono girando su sé stessi e svaniscono, anche fuori dal biglietto. Quando più di metà della lamina è grattata, quel che resta si stacca da solo in una pioggia di frammenti e svanisce, e il regalo salta fuori un pezzo alla volta: 20% OFF in rosso, su cui passa una striscia di luce, on your first stay, il codice WELCOME20 e Copy code, che lo copia e dice Copied.

Come funziona

La lamina

La lamina è un canvas sopra il regalo, dipinto con una sfumatura d’argento, righe diagonali e la scritta incisa (chiara sotto e scura sopra). La moneta la toglie con destination-out: un cerchio di raggio BRUSH con un bordo morbido (un gradiente radiale), stampato lungo il percorso a passi di un terzo del raggio, così uno strappo veloce non lascia buchi.

Quanto ne è andato

Ogni 0,12 secondi di grattata si leggono i pixel della lamina (getImageData, con willReadFrequently) su una griglia di 48 per 24 punti: oltre REVEAL di punti trasparenti, il resto si stacca da solo.

I frammenti

A ogni tocco della moneta si staccano FLAKES frammenti: rettangolini d’argento con una spinta nella direzione della moneta, una gravità (GRAVITY) e una rotazione, disegnati su un canvas grande quanto la finestra; mentre girano la loro larghezza si stringe e si allarga (mostrano il taglio) e svaniscono in poco meno di due secondi.

Il regalo

Staccata la lamina (svanisce e cresce un poco), i pezzi del regalo arrivano uno dopo l’altro da 0,7 con back.out, e sulle parole grandi passa una striscia di luce: uno sfondo a gradiente ritagliato sul testo (background-clip text) che scorre da destra a sinistra.

Tasti e anteprima

Reveal without scratching mostra il regalo senza grattare e porta la focalizzazione su Copy code; finché la lamina c’è il regalo è aria-hidden, poi una regione aria-live lo dice. Copy code copia il codice negli appunti. Un clic da script (l’anteprima della libreria) gratta la lamina a zig-zag con la moneta finché il regalo esce, e la volta dopo rimette la lamina come un adesivo, da sinistra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BRUSH`	script.js	`22`	Il raggio, in pixel, della moneta che gratta.
`REVEAL`	script.js	`0.5`	Quanta lamina va grattata perché il resto si stacchi da solo.
`FLAKES`	script.js	`2`	Quanti frammenti si staccano a ogni tocco della moneta.
`GRAVITY`	script.js	`900`	Quanto in fretta cadono i frammenti, in pixel al secondo al quadrato.
`PRIZE`	script.js	`['20% off', 'on your first stay', 'WELCOME20']`	Il regalo: la scritta grande, quella piccola e il codice.

Provali nel Playground

Quando usarla

Per un buono di benvenuto, un premio in una newsletter, il risultato di un concorso, una sorpresa alla fine di un acquisto, un codice sconto da scoprire.

Sul telefono

Si gratta col dito senza far scorrere la pagina (touch-action none sul biglietto) e senza il menu del tocco lungo; la moneta non c’è, perché la moneta è il dito; la lamina non si ridipinge quando le barre di Safari compaiono o spariscono.

Con il movimento ridotto

La lamina si gratta lo stesso, ma senza frammenti; passata la metà sparisce di colpo e il regalo compare senza saltare e senza la striscia di luce, e la lamina torna senza scorrere.

Trappole

Leggere spesso i pixel di un canvas (getImageData) è lento se il canvas sta nella scheda grafica: getContext('2d', { willReadFrequently: true }) lo tiene dove leggerlo costa poco.
Al telefono la finestra cambia altezza quando compaiono e spariscono le barre del browser: la lamina si ridipinge solo se cambia la sua larghezza, o la grattata andrebbe persa.
Un pulsante nascosto con display none fa saltare quello che ha sopra in una pagina centrata: qui sparisce con visibility hidden e tiene il suo posto.
Una gomma dal bordo duro lascia scalini lungo il percorso: un gradiente radiale dal centro pieno al bordo trasparente dà un bordo morbido, come una moneta vera.
Safari taglia ai bordi il drop-shadow di un elemento i cui figli si trasformano (la lamina che si stacca): la carta del biglietto e la sua ombra stanno in uno strato a sé, un ::before senza figli.

Librerie

GSAP 3.15.0, Chivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.