Le monete che si impilano

Caricamento, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

Il pagamento di un’app per freelance che va in banca come monete d’oro: ognuna entra dall’alto girando su sé stessa, atterra sulla pila con un tintinnio di luce, la pila oscilla sulla sua molla e la cifra accanto sale della sua parte. L’altezza della pila è l’avanzamento; alla fine un riflesso la percorre. Se la banca non risponde la moneta colpisce il bordo, cade di taglio e rotola via.

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, viewport-fit=cover">
  <title>The coin stack transfer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the payout card of a freelancing app: the money goes to the bank as coins that fall turning over and stack up
         in a column on the right. The height of the stack is the progress, the amount beside it climbs as every coin
         lands. The coins are drawn in pseudo 3D on the canvas by script.js; the words and the button are HTML -->
    <section class="pay" aria-labelledby="pay-title" data-pay>
      <div class="pay__words">
        <h2 class="pay__title" id="pay-title">Payout · Fernhill Studio</h2>
        <p class="pay__amount" aria-hidden="true"><span class="pay__figure" data-amount>€2,480.00</span></p>
        <p class="pay__status">
          <span class="pay__swap" data-status>Ready to transfer</span>
          <svg class="pay__tick" viewBox="0 0 20 20" aria-hidden="true" data-tick><path d="M4.6 10.4l3.5 3.5 7.4-8" pathLength="1"/></svg>
        </p>
        <p class="pay__sub"><span class="pay__swap" data-sub>To account ending 4821 · instant</span></p>
        <button class="pay__btn" type="button" data-action data-autoclic><span class="pay__label" data-label>Transfer to bank</span></button>
      </div>
      <div class="pay__stack" role="progressbar" aria-labelledby="pay-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not transferred yet" data-stage>
        <canvas class="pay__coins" aria-hidden="true" data-coins></canvas>
      </div>
      <p class="sr" role="status" aria-live="polite" data-live></p>
    </section>
  </main>

  <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.

32 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 «Le monete che si impilano» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, da solo al centro, un riquadro grafite con gli angoli tondi: a sinistra Payout · Fernhill Studio, la cifra grande €2,480.00, Ready to transfer, To account ending 4821 · instant e il pulsante chiaro Transfer to bank; a destra, tratteggiato e appena visibile, il contorno della pila piena. Premuto, la cifra torna a €0.00, il pulsante diventa Sending… col solo bordo e le monete cominciano a cadere: ognuna compare dall’alto del riquadro, scende girando intorno a un asse orizzontale (la faccia col simbolo dell’euro e il rovescio con una rosetta lampeggiano a seconda di come prendono la luce), arriva piatta sulla pila, fa un piccolo saltello e ondeggia come una moneta fatta girare sul tavolo, mentre un anello di luce corre sulla faccia e una scintilla brilla sul bordo. La pila si inclina un poco e torna su con una molla, e la cifra a sinistra sale di 155 euro con una piccola spinta in alto; la riga sotto dice quanto manca. Quando la banca conferma un pezzo grande le monete scendono una dietro l’altra. Con l’ultima moneta il contorno tratteggiato sparisce, un riflesso sale lungo la pila, la cifra si gonfia un attimo, accanto a Transfer complete si disegna una spunta verde e il pulsante diventa Done, che raccoglie le monete dall’alto e rimette il riquadro a riposo. Una volta su due, nella demo, a metà strada la banca non risponde: la moneta in arrivo cade sul bordo destro della pila, rimbalza, la pila traballa, la moneta scende di taglio davanti e rotola fuori dal riquadro; la scritta Transfer interrupted in rosso dice quanto è già arrivato e Retry riprende da lì.

Come funziona

Una moneta è un cilindro con il suo riferimento

Ogni moneta ha tre vettori: la normale e due assi nella faccia. La camera è ortografica e guarda dall’alto di VIEW gradi, quindi un vettore del mondo finisce sullo schermo come (x, −(y cos φ − z sin φ)). La faccia rivolta alla camera è un cerchio portato sull’ellisse da una sola trasformazione affine (ctx.transform con gli assi proiettati), così il rilievo ci si disegna sopra con drawImage; il bordo è un anello di 72 quadrilateri (128 per le monete della pila), divisi in tre fasce, uno smusso per parte e la zigrinatura in mezzo, ognuno colorato dalla sua normale. Si disegnano solo le superfici rivolte alla camera: in un solido convesso non si coprono mai, e non serve ordinarle.

La luce di un metallo

Il colore di ogni superficie non dipende tanto da dove arriva la luce quanto da dove punta il suo riflesso, r = 2(n·v)n − v: un riquadro di luce in alto a sinistra, un orizzonte chiaro e un pavimento scuro. Il numero che ne esce sceglie il colore su una scala di tre ori (scuro, pieno, pallido) presi dal CSS. Così una faccia che gira lampeggia quando il riflesso passa sul riquadro, e lo smusso in alto di ogni moneta della pila prende una riga di luce che separa le monete fra loro.

Il rilievo, acceso da otto lati

Il simbolo dell’euro, l’orlo, la corona di perline e la rosetta del rovescio sono disegnati in bianco su nero come una mappa delle altezze, sfumati un poco e derivati in x e in y. Da qui escono otto immagini, una per ogni direzione della luce: i pendii illuminati in chiaro, quelli in ombra in scuro, e le parti in rilievo velate come metallo satinato. A ogni fotogramma la faccia calcola da dove le arriva la luce nei suoi assi e mescola le due immagini più vicine: il rilievo resta giusto mentre la moneta gira.

Cadere piatta, ondeggiare, oscillare

Una moneta parte sopra il riquadro con una piccola velocità e cade con GRAVITY; il tempo di caduta fino al suo posto si risolve in anticipo, e il giro intorno all’asse orizzontale ha la velocità che la fa arrivare piatta (un numero intero di giri). Atterrata, la sua inclinazione si spegne mentre l’asse gira sempre più in fretta, come una moneta sul tavolo, e fa un saltello di un pixel. La pila è una colonna rigida su una molla angolare, integrata a passi di 1/240 di secondo, più morbida quanto più è alta: ruota sul bordo della moneta di sotto dal lato verso cui pende, e ogni moneta le dà una spinta dal lato da cui arriva. Le monete sotto la cima sono un disegno fatto una volta sola; la cima si ridisegna davvero.

La moneta che sfugge

Quando la banca non risponde, le monete già in aria atterrano e poi ne parte una puntata sul bordo destro. Toccato il bordo rimbalza verso destra e verso chi guarda, la pila riceve un colpo, e il giro cambia velocità per farla arrivare a terra di taglio con la faccia verso di noi; lì rimbalza ancora un poco, si raddrizza con un’oscillazione che si spegne e rotola: lo spostamento diviso per il raggio fa girare il disegno sulla faccia. Retry riparte dalla parte già confermata e la moneta persa viene rimandata.

Per chi non vede e per chi non vuole movimento

La pila è un role=progressbar con aria-valuenow e un aria-valuetext che dice quanti euro sono arrivati, il riquadro ha aria-busy mentre lavora e una riga aria-live dice quando il trasferimento parte, si interrompe e finisce. Il pulsante cambia parola (Transfer to bank, Sending…, Retry, Done) e prende la larghezza nuova con un piccolo rimbalzo; mentre le monete cadono è aria-disabled. Il contorno tratteggiato della pila piena fa vedere fin dall’inizio quanto manca.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`AMOUNT`	script.js	`2480`	Il pagamento, in euro.
`ACCOUNT`	script.js	`'4821'`	Le ultime cifre del conto su cui arriva.
`SECONDS`	script.js	`4.8`	Quanto dura un trasferimento nella demo, in secondi (uno vero segue la banca).
`COINS`	script.js	`16`	Quante monete fanno la pila piena: ognuna è una parte uguale della cifra.
`FAIL_EVERY`	script.js	`2`	Nella demo, un trasferimento su quanti si interrompe (0 mai).
`FAIL_AT`	script.js	`0.56`	Fin dove arriva il trasferimento che si interrompe, da 0 a 1.
`FLIPS`	script.js	`2.4`	Quante volte una moneta si gira in un secondo di caduta.
`GRAVITY`	script.js	`2600`	Quanto forte cadono le monete, in pixel al secondo quadrato.
`SWAY`	script.js	`1`	Quanto oscilla la pila quando atterra una moneta: 0 per niente, 2 molto.
`SPRING`	script.js	`120`	Quanto è dura la molla della pila: più alta, più in fretta torna dritta.
`VIEW`	script.js	`24`	Quanto dall’alto guardiamo le monete, in gradi.
`SHEEN`	script.js	`0.9`	Il riflesso che sale lungo la pila finita: 0 niente, 1.5 forte.

Provali nel Playground

Quando usarla

Per un’attesa di qualche secondo che riguarda dei soldi: un pagamento in uscita, un prelievo dal saldo, un bonifico istantaneo, un rimborso. Le monete dicono subito di che cosa si tratta e la cifra che sale accanto rassicura; per un caricamento qualsiasi, che non parla di denaro, la metafora è fuori posto.

Sul telefono

Il riquadro prende la larghezza dello schermo meno 32 pixel (358 a 390) e resta alto 238; la colonna delle monete si stringe a 132 pixel e la cifra scende a 31. Il canvas disegna alla densità vera dello schermo, fino a due volte. Il pulsante è una pillola alta 36: col dito si schiaccia e rimbalza, e la scritta si allarga sull’asse della larghezza solo sotto il mouse.

Con il movimento ridotto

Niente cadute, giri, saltelli né oscillazioni: ogni moneta compare al suo posto nella pila in dissolvenza, senza anelli né scintille, e la moneta che sfugge non c’è (resta la scritta rossa). Niente riflesso alla fine e niente monete raccolte: si dissolvono. La pila cresce lo stesso, perché è lei che dice a che punto si è.

Trappole

Il simbolo dell’euro in rilievo non si leggeva: la luce disegnava solo i bordi, e il piano in rilievo aveva lo stesso colore del fondo. Ora le parti in rilievo hanno un velo chiaro, come il metallo satinato accanto al fondo lucido, e il simbolo è più grosso e ripassato.
Con 64 quadrilateri sul bordo la zigrinatura sembrava una scacchiera: la pila ne usa 128, disegnati una volta sola in un’immagine, e le righe alternate sono più tenui.
Una moneta che entrava dall’alto copriva il filo del bordo del riquadro: il canvas ha una maschera che la fa uscire dal buio nei primi 30 pixel.
La moneta che sfugge usciva dal riquadro in un quarto di secondo, ancora in aria, senza che si capisse che rotolava: ora rimbalza piano, viene avanti e cade di taglio davanti alla pila, e rotola fuori a 125 pixel al secondo.
Il simbolo sulla faccia di cima cambiava di colpo quando la moneta atterrava (l’immagine della pila ha il suo verso fisso): la cima si disegna sempre davvero, con il suo verso, e le facce delle monete sotto non si vedono.
La cifra non tornava a €0.00 dal secondo trasferimento in poi: la funzione che cambia le parole credeva di averla già scritta. Ora ogni scrittura della cifra aggiorna anche quello che la funzione ricorda.
Dopo Done il contorno tratteggiato della pila piena non tornava: si riaccende mentre le monete vengono raccolte.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

Provata il 8 ottobre 2026

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

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.