Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il pagamento inciso a guilloché
Il pagamento con la carta in un negozio online, con l’avanzamento inciso come il motivo di sicurezza di una banconota: le linee sottili intrecciate che taglia il tornio a guilloché. Sulla lastra aspetta il fantasma pallido del motivo intero; ogni fase del pagamento è un giro del bulino, un filo che gira dall’alto e lascia le linee inchiostrate dietro di sé: la fascia intrecciata fuori mentre la carta viene autorizzata, la rosetta mentre la banca controlla, la stella al centro mentre il pagamento si conferma. Il tratto più fresco è più scuro, come l’inchiostro bagnato. Se la banca non risponde il bulino si ferma, trema e l’ultimo taglio diventa rosso finché Retry non riparte; pagato, un riflesso passa sulla lastra come la luce su una lamina, e Cancel o Done riavvolgono l’incisione.
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.
<!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 guilloché payment</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the guilloché payment: a card payment whose progress is engraved like the security pattern of a banknote. Each
step of the payment is one turn of the graver: the woven band outside while the card is authorized, the
rosette while the bank checks it, the star in the middle while the payment is confirmed. The pattern is
drawn by script.js -->
<section class="gp" aria-labelledby="gp-title" data-pay>
<div class="gp__head">
<div class="gp__words">
<h2 class="gp__title" id="gp-title"><span class="gp__swap" data-title>Studio Ferro</span></h2>
<p class="gp__meta"><span class="gp__swap" data-meta>Visa ending 4242</span></p>
</div>
<p class="gp__amount" data-amount>€186.00</p>
</div>
<div class="gp__plate" role="progressbar" aria-labelledby="gp-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<canvas class="gp__canvas" aria-hidden="true" data-plate></canvas>
</div>
<div class="gp__foot">
<p class="gp__status">
<svg class="gp__tick" viewBox="0 0 16 16" aria-hidden="true" data-tick><path d="M3.2 8.4l3 3 6.6-7" pathLength="1"/></svg>
<span class="gp__swap" data-status>Secured by your bank</span>
</p>
<button class="pill" type="button" data-btn data-autoclic>
<span class="pill__fill" aria-hidden="true"></span>
<span class="pill__label" data-label>Pay €186.00</span>
</button>
</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.
37 valori da cambiare
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 «Il pagamento inciso a guilloché» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro: in alto Studio Ferro e sotto Visa ending 4242, a destra l’importo €186.00 grande in un serif morbido; al centro una lastra con il fantasma grigio chiarissimo di un guilloché intero, una fascia intrecciata fuori, una rosetta a diciotto punte e una stella fitta al centro, tutto di linee sottilissime; in fondo Secured by your bank e la pillola nera Pay €186.00. Entrando il fantasma sale dalla lastra. Premuto Pay, un filo nero, il bulino, parte dall’alto e gira in senso orario sulla fascia esterna e dietro di lui le dodici onde della fascia si inchiostrano in verde, incrociandosi in una treccia; l’ultimo tratto dietro al bulino è più scuro, come inchiostro bagnato. Il titolo dice Authorizing e sotto Step 1 of 3 · 33%. Finito il giro, il bulino passa alla rosetta, che si incide color rame mentre il titolo dice Checking with your bank, e poi alla stella del centro, blu notte, con Confirming. Durante il pagamento la pillola è un anello con Cancel: l’incisione si riavvolge all’indietro e il titolo dice Payment cancelled, sotto Nothing has been charged. Una volta su due la banca non risponde: il bulino si ferma e trema, il suo tratto fresco diventa rosso, il titolo dice in rosso Bank not answering e sotto Nothing has been charged; Retry riparte da lì. Alla fine il bulino si alza, un riflesso di luce chiara attraversa la lastra in diagonale come su una lamina, l’importo fa un piccolo sobbalzo, il titolo dice in verde Payment complete e in basso si disegna una spunta prima di Paid €186.00. Done riavvolge l’incisione, dalla stella alla fascia, finché resta solo il fantasma.
Come funziona
Linee polari a famiglie
Ogni linea è una curva polare r(θ) campionata in 720 punti, e ogni strato è una famiglia di linee uguali spostate di fase: la fascia è r = 102 + d·sin(20θ + 2πk/12), dodici anelli ondulati che, sfasati, si incrociano in una treccia; la rosetta è una rosa a nove petali, 36 + D·w·(0,8 + 0,2·cos 18θ), con w = ½ + ½·sin(9θ + 2πk/20); la stella è 7 + D·w² con sei punte. È quello che faceva il tornio a guilloché sulle casse degli orologi e sulle banconote.
Il fantasma e il bulino
Tutto il motivo si disegna una volta sola, grigio chiarissimo, su un canvas a parte: è il fantasma che aspetta sulla lastra e che ogni fotogramma si copia sotto il resto. L’avanzamento da 0 a 1 diventa tre giri, uno per strato, e ogni strato disegna le sue linee dal punto 0 al punto q·720, con l’ultimo pezzo interpolato, quindi il bulino gira in modo continuo. Il bulino stesso è un filo radiale dal bordo interno a quello esterno dello strato.
L’inchiostro bagnato
Gli ultimi FRESH gradi di ogni linea dietro al bulino si ripassano nel colore del bulino a metà trasparenza: l’incisione appena fatta è più scura e si schiarisce nel colore dello strato man mano che il bulino va avanti. Quando la banca non risponde quel tratto diventa rosso e il bulino trema per qualche ventesimo di secondo con un yoyo di GSAP.
Il riflesso sulla lamina
Pagato, un gradiente lineare chiaro attraversa la lastra in diagonale disegnato in source-atop, così cade solo sulle linee incise e sul fantasma, come la luce su una lamina olografica, mentre la spunta si disegna con stroke-dashoffset e si fa largo accanto a Paid allargandosi da zero.
Riavvolgere
Cancel durante il pagamento e Done alla fine portano l’avanzamento a zero con un tween di GSAP, più lungo se c’è più inciso: i tre strati si riavvolgono in ordine inverso, dalla stella alla fascia. Il ciclo disegna solo quando qualcosa cambia ed esce dal ticker quando la lastra è ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
AMOUNT | script.js | '€186.00' | Quanto si paga (compare in alto, nella pillola e alla fine). |
SECONDS | script.js | 6 | Quanti secondi dura il pagamento nella demo. |
BAND | script.js | { lines: 12, waves: 20, depth: 10 } | La fascia intrecciata: quanti anelli, quante onde in un giro, quanto profonde. |
ROSETTE | script.js | { lines: 20, petals: 9, depth: 44 } | La rosetta: quante linee, quanti petali, quanto profondi. |
STAR | script.js | { lines: 12, points: 6, depth: 26 } | La stella al centro: quante linee, quante punte, quanto lunghe. |
LINE | script.js | 0.7 | Lo spessore di una linea incisa, in pixel. |
FRESH | script.js | 22 | Per quanti gradi dietro al bulino l’inchiostro è ancora bagnato. |
FAIL_EVERY | script.js | 2 | Un pagamento ogni quanti aspetta una banca che non risponde (0 mai). |
FAIL | script.js | 0.55 | Dove la banca smette di rispondere, da 0 a 1. |
PREVIEW | script.js | 1.35 | Nel giro dell’anteprima: quante volte più veloce. |
LABELS | script.js | ['Pay', 'Cancel', 'Retry', 'Done'] | Le parole della pillola, stato per stato (dopo Pay viene l’importo). |
--band | style.css | #0b6e57 | Il colore della fascia intrecciata. |
--rosette | style.css | #c0612b | Il colore della rosetta. |
--star | style.css | #1b2440 | Il colore della stella al centro. |
Quando usarla
Per il pagamento con la carta in un negozio online, per la conferma di una prenotazione con caparra, per un bonifico o un pagamento in un’app di banca, per l’acquisto di un buono regalo, per ogni attesa in cui conta che la cosa sembri sicura e preziosa.
Sul telefono
Il pannello prende tutta la larghezza meno i margini e la lastra si rimpicciolisce con lui, perché il motivo è disegnato in unità della sua scatola; le linee restano sottili. La pillola risponde al tocco come al mouse.
Con il movimento ridotto
L’incisione avanza lo stesso, perché è l’avanzamento, ma il bulino non trema, il riflesso finale non passa, l’importo non sobbalza e le scritte cambiano senza spostarsi; il fantasma c’è già, senza salire.
Trappole
- Con ventotto anelli nella fascia le linee si toccavano e la fascia era un nastro verde pieno, senza la treccia: dodici anelli con venti onde lasciano vedere gli incroci.
- Una seconda onda lenta aggiunta alla fascia la rendeva ovale da una parte e sembrava un errore: la fascia ora è un cerchio pulito.
- Le cifre di Paid €186.00 erano tabellari, larghe come quelle della percentuale, e il prezzo sembrava scritto a macchina: ora le cifre tabellari valgono solo mentre la percentuale cambia.
- Sul telefono il titolo dell’errore, Your bank did not answer, arrivava a toccare l’importo: ora dice Bank not answering.
Librerie
GSAP 3.15.0, Fraunces (font variabile, assi opsz, SOFT, WONK e wght) 5.3.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
