Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La culla di Newton del caricamento
Un pagamento con la carta in elaborazione, fatto come una culla di Newton d’acciaio lucido su una base di noce: a ogni fase del pagamento si alza una sfera in più. Una sfera oscilla mentre la carta viene autorizzata, due mentre la banca la verifica, tre mentre il pagamento si conferma, e dall’altra parte della fila ne volano fuori altrettante. Gli urti sono fisica vera. Alla fine le sfere rallentano e si fermano, una luce le attraversa e si disegna la spunta; se la banca rifiuta la carta le sfere si spengono di colpo e compare Retry.
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 Newton's cradle loader</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Newton's cradle loader: a card payment being processed, shown as a Newton's cradle of polished steel on a
walnut base. Every step of the payment lifts one more ball: one ball swings while the card is authorized, two
while the bank verifies it, three while the payment is confirmed. The balls really collide and pass the blow
along the row. At the end they slow down and stop and a tick is drawn. The cradle is drawn by script.js -->
<section class="pay" aria-labelledby="pay-title" data-pay>
<canvas class="pay__cradle" aria-hidden="true" data-cradle></canvas>
<div class="pay__head">
<div class="pay__words">
<h2 class="pay__title" id="pay-title"><span class="pay__swap" data-title>Ready to pay</span></h2>
<p class="pay__meta"><span class="pay__swap" data-meta>$1,249.00 · Card ending 4242</span></p>
</div>
<p class="pay__figure" aria-hidden="true">
<span class="pay__pct" data-pct></span>
<svg class="pay__tick" viewBox="0 0 28 28" data-tick><path d="M6.5 14.8l5 5 10-11.4" pathLength="1"/></svg>
</p>
</div>
<div class="pay__steps" role="progressbar" aria-labelledby="pay-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<div class="step" data-step><span class="step__word">Authorizing</span><span class="step__track"><span class="step__fill"></span></span></div>
<div class="step" data-step><span class="step__word">Verifying</span><span class="step__track"><span class="step__fill"></span></span></div>
<div class="step" data-step><span class="step__word">Confirming</span><span class="step__track"><span class="step__fill"></span></span></div>
</div>
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Pay $1,249.00</span></button>
<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.
40 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 «La culla di Newton del caricamento» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da sola al centro, una culla di Newton: un telaio di tubi cromati con due binari in alto, cinque sfere d’acciaio lucido appese ognuna a due fili sottili, una base di noce laccato con le venature e un bordo chiaro. Ogni sfera riflette un cielo chiaro in alto, l’orizzonte curvo e il legno sotto, con una finestra di luce in alto a sinistra; sulla base ha la sua ombra. Sotto ci sono il titolo Ready to pay, la riga $1,249.00 · Card ending 4242, tre fasi (Authorizing, Verifying, Confirming) ognuna con la sua pista, e il pulsante bianco Pay $1,249.00. Puntando il pulsante (o arrivandoci con la tastiera) la prima sfera si scosta un poco; lasciato, torna nella fila e la urta con un piccolo colpo. Premuto, il pulsante diventa Processing, chiaro e col bordo, a destra compare la percentuale e la prima sfera si alza e cade: colpisce la fila e l’ultima vola fuori dall’altra parte, torna, colpisce, e così via, mentre la pista di Authorizing si riempie. A ogni fase nuova, quando le sfere alzate arrivano in cima alla loro corsa, ne viene presa una in più: due sfere per Verifying with your bank, tre per Confirming the payment, e dall’altra parte ne escono due e tre. Verso la fine le sfere vengono frenate, si fermano dolcemente, una luce le attraversa da sinistra a destra, le tre piste diventano verdi una dopo l’altra, al posto della percentuale si disegna una spunta verde con un rimbalzo e il titolo diventa Payment complete. Done riporta tutto a riposo. Una volta su due, nella demo, a metà della verifica la banca rifiuta la carta: le sfere perdono il rimbalzo, si ammucchiano e si fermano, il titolo in rosso Card declined trema, la pista di Verifying diventa rossa e il pulsante dice Retry, che rialza le sfere e riprende da dove si era fermato. Quando non si paga, le sfere si possono tirare col mouse o col dito e lasciar andare.
Come funziona
Cinque pendoli veri
Ogni sfera è un pendolo con il suo angolo θ e la sua velocità angolare ω: θ'' = −(2π ÷ PERIOD)² · sin θ − DRAG · θ'. Si integra con Eulero semi-implicito (prima la velocità, poi l’angolo) in 14 passi per fotogramma, e il tempo di un fotogramma non supera mai 1/30 di secondo, così una scheda tornata in primo piano non fa saltare le sfere. Si usa il seno vero, non l’angolo: alle ampiezze grandi le oscillazioni sono un poco più lente, come nella realtà. I due fili di ogni sfera partono dai due binari, uno più in alto dell’altro perché la culla si guarda un poco dall’alto, e si uniscono sull’occhiello.
L’urto che passa lungo la fila
Quando due vicine si toccano (la distanza fra i centri è meno di due raggi) si scambiano un impulso lungo la retta fra i centri. Per due pendoli vincolati, quanto un giro di ciascuno sposta la sua sfera lungo quella retta è a = L · (cos θ · nx − sin θ · ny); l’impulso è λ = −(1 + e) · v ÷ (a₁²/I + a₂²/I), con v la velocità con cui si avvicinano ed e = BOUNCE. Poi la sovrapposizione si divide fra le due. Le sfere a riposo stanno a un quarto di unità l’una dall’altra, quindi un colpo viaggia davvero da una sfera all’altra; i contatti si risolvono tre volte per passo, nei due versi. Nessuna regola speciale per «due dentro, due fuori»: viene da sé.
Una sfera in più a ogni fase
Il pagamento è una timeline GSAP: ogni fase ha la sua parte di SECONDS e la sua percentuale (34, 72, 100), lenta all’inizio e alla fine come una risposta della banca. Quando la fase cambia, lo script aspetta che le sfere alzate arrivino in cima alla corsa (θ < 0 e ω che passa da negativa a positiva), poi le tiene, ne prende una in più e le porta tutte all’angolo della fase con un tween; nel frattempo le altre vengono frenate fino a fermarsi. Dopo un attimo in cima le lascia andare. Se le sfere non arrivano in cima entro 1,6 secondi le prende lo stesso.
L’acciaio dipinto ogni fotogramma
Su un canvas: la base e il telaio dietro sono dipinti una volta sola in un’immagine a parte, il telaio davanti in un’altra. A ogni fotogramma si dipingono le ombre (un’ellisse sfumata che si allarga e sbiadisce quando la sfera sale), i fili e le sfere. Ogni sfera è un fondo d’acciaio scuro, una calotta di cielo chiaro, il legno sotto deformato in una coppa il cui bordo è l’orizzonte curvo, il riflesso del bordo chiaro della base, il bordo più scuro, una luce fredda a destra e la finestra di luce che scivola con la posizione della sfera. Quando una vicina si avvicina, sul fianco compare il suo riflesso, schiacciato.
Fine, rifiuto e chi non vede
Al 95% le ultime sfere lasciate fanno ancora un’oscillazione, poi l’attrito sale e quando quasi non si muovono più l’ultimo dondolio va a zero con un tween: solo allora la spunta si disegna e una banda di luce attraversa la fila (lighter). Al rifiuto il rimbalzo scende a 0,15 e l’attrito sale: le sfere si ammucchiano e si fermano. Quando niente si muove il ciclo non dipinge. Le fasi sono un role=progressbar con aria-valuenow e aria-valuetext («51 percent, Verifying») al massimo ogni 0,6 secondi, aria-busy mentre lavora e una riga aria-live per ogni fase, la fine e il rifiuto. I clic da script (quelli dell’anteprima della libreria) non riportano mai a riposo: dopo la fine, passati 2,4 secondi, pagano di nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 9 | Quanto dura il pagamento della demo, in secondi (uno vero segue la risposta della banca). |
SWING | script.js | 28 | Di quanti gradi si alza la prima sfera; con due e tre sfere l’angolo è un poco più piccolo. |
PERIOD | script.js | 1.15 | Quanto dura un’oscillazione completa, in secondi: più è alto, più le sfere vanno piano. |
BOUNCE | script.js | 0.985 | Quanto rimbalzano le sfere fra loro: 1 non perdono niente, 0,8 si fermano presto e si muovono insieme. |
DRAG | script.js | 0.08 | L’attrito dell’aria sulle sfere. |
FAIL_EVERY | script.js | 2 | Nella demo, un pagamento ogni quanti viene rifiutato dalla banca; 0 mai. |
FAIL_AT | script.js | 0.52 | A che punto del pagamento arriva il rifiuto, da 0 a 1. |
LABELS | script.js | { busy: 'Processing', done: 'Done', retry: 'Retry' } | Le scritte del pulsante mentre lavora, alla fine e dopo il rifiuto; quella a riposo, Pay $1,249.00, si cambia in index.html. |
WORDS | script.js | { busy: 'Processing payment', done: 'Payment complete', declined: 'Card declined' } | Il titolo mentre lavora, alla fine e dopo il rifiuto; quello a riposo, Ready to pay, si cambia in index.html. |
NOTES | script.js | ['Authorizing your card', 'Verifying with your bank', …] | La riga sotto il titolo durante le tre fasi, alla fine e dopo il rifiuto; quella a riposo e i nomi delle fasi si cambiano in index.html. |
Quando usarla
Per un’attesa di qualche secondo dove conta la fiducia: un pagamento con la carta, un bonifico istantaneo, la verifica di un conto, un abbonamento che si attiva. La culla dice che qualcosa sta lavorando con precisione e senza fretta, e le sfere che aumentano dicono a che fase si è anche senza leggere. Va bene in un negozio di oggetti di design, in un’app di finanza o di un ufficio, dove l’acciaio e il noce stanno bene col prodotto. Per un’attesa brevissima, o per un caricamento che si ripete spesso, è troppo.
Sul telefono
Il componente è largo al massimo 380 pixel: a 390 sta in 358, il canvas si stringe con lui e dipinge alla densità vera dello schermo, fino a due volte, e le sfere hanno la stessa fisica a ogni misura (tutto è in unità del disegno). Le scritte restano su una riga. Il pulsante è alto 48 e col dito si schiaccia e rimbalza; la sfera che si scosta al passaggio c’è solo col mouse e con la tastiera. Le sfere si tirano anche col dito, in orizzontale: il canvas lascia passare lo scorrimento verticale della pagina.
Con il movimento ridotto
Le sfere restano ferme nella fila: niente oscillazioni, niente sfera che si scosta, niente trascinamento, niente luce finale e niente tremito del titolo. Il pagamento si legge nelle parole, nella percentuale e nelle piste delle fasi, che si riempiono; le parole cambiano con una dissolvenza, le piste diventano verdi senza ritardi e la spunta compare senza disegnarsi.
Trappole
- Le sfere riflettevano un cielo grigio chiaro per metà e il legno marrone per l’altra metà, con l’orizzonte dritto: sembravano palline di Natale piene a metà. Ora l’acciaio è scuro come la stanza nera intorno, il cielo è solo una calotta in alto, e il legno è schiacciato verso il bordo in basso, scuro, con una sola riga calda per orizzonte.
- Alla fine del pagamento la frenata cominciava al 100% e le sfere ci mettevano tre secondi a fermarsi, con 100% e Processing fermi sullo schermo: ora il freno comincia al 95%, dopo un’ultima oscillazione delle sfere appena lasciate, e la spunta arriva quando sia il pagamento sia le sfere hanno finito.
- Con le fasi divise in parti uguali di otto secondi le tre sfere uscivano un attimo prima della fine: tra l’attesa della cima della corsa e il sollevamento, ogni cambio di fase costa più di un secondo. Ora il pagamento dura nove secondi e la terza fase ha più tempo.
- Durante il sollevamento le sfere tenute partono da angoli diversi e per un attimo fra la seconda e la terza c’è un vuoto: si chiude da solo alla fine del tween, perché tutte arrivano allo stesso angolo, e le sfere libere intanto vengono frenate.
- Una sfera trascinata fino in fondo entrava nel montante del telaio: ora l’angolo delle sfere alle due estremità è limitato da dove stanno i montanti, sia trascinando sia durante l’oscillazione.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 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.
