Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il carrello nella retina
Il carrello di un fruttivendolo dove l'ordine è una retina di cotone appesa a una barra d'ottone: ogni frutto nel carrello è un corpo in un piccolo mondo fisico. Col più un frutto viene lanciato dentro su un arco vero, urta gli altri e rotola in un buco mentre la rete cede sotto il peso e la borsa molleggia sui manici; col meno il frutto più in alto viene sfilato e gli altri cadono al suo posto. Il totale è su un cartellino di carta legato al nodo in fondo, che gira su se stesso quando la consegna diventa gratis.
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">
<title>The string bag cart</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/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a greengrocer's cart, and the order is a string bag hanging from a brass rail: every piece of fruit in the cart
is tossed into the net, falls, rolls and settles among the others, and the net stretches round them; one less
is plucked out and the rest drop into the gap. The total is on a kraft tag tied to the knot at the bottom, and
the tag spins round on its string when delivery becomes free -->
<section class="cart" aria-labelledby="cart-title" data-cart data-autoclic>
<header class="cart__head">
<h2 class="cart__title" id="cart-title">Your market bag</h2>
<p class="cart__count" data-count></p>
</header>
<div class="stall" data-stall>
<div class="stall__art" data-art>
<canvas class="stall__net" aria-hidden="true" data-net></canvas>
<div class="tag" aria-hidden="true" data-tag>
<div class="tag__card" data-tag-card>
<span class="tag__total" data-tag-total></span>
<span class="tag__goal" data-tag-goal></span>
</div>
</div>
</div>
<button class="restart" type="button" hidden data-restart>Fill it with the market mix</button>
</div>
<ul class="lines" aria-label="Fruit in your bag" data-lines></ul>
<div class="sums">
<p class="sums__row"><span>Subtotal</span><span class="sums__n" data-sub></span></p>
<p class="sums__row"><span>Delivery</span><span class="sums__n"><s class="sums__was" data-was></s><span data-ship></span></span></p>
</div>
<button class="pay" type="button" data-pay>
<span class="pay__face">
<svg class="pay__spin" viewBox="0 0 20 20" aria-hidden="true" data-pay-spin><path d="M10 2.6a7.4 7.4 0 1 1-7.4 7.4"/></svg>
<svg class="pay__tick" viewBox="0 0 20 20" aria-hidden="true" data-pay-tick><path d="M4.6 10.4l3.6 3.6 7.2-7.6"/></svg>
<span class="pay__label" data-pay-label></span>
</span>
</button>
<p class="sr" 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.
48 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 carrello nella retina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un carrello bianco largo 390 pixel: in alto Your market bag col numero dei frutti, sotto un riquadro color panna con una barra d'ottone da cui pende, a un gancio a S, una retina di cotone verde con un manico di legno; poi quattro righe (Blood orange, Amalfi lemon, Gala apple, Victoria plum), ognuna col suo frutto dipinto, il prezzo di uno, Remove, il totale della riga e i bottoni meno e più; in fondo Subtotal, Delivery e il pulsante Pay con la cifra. Nella retina ci sono i frutti del carrello, uno per uno: tre arance sanguinelle, due limoni, due mele e quattro prugne. Aprendo la pagina arrivano uno dopo l'altro dall'alto, lanciati un po' da destra e un po' da sinistra, entrano dalla bocca della borsa, urtano quelli che ci sono già e rotolano finché trovano posto; la rete si allarga intorno a loro e la borsa molleggia e oscilla sul gancio. Col più un frutto nuovo arriva allo stesso modo; col meno quello più in alto di quella riga viene sfilato: si alza un poco, esce davanti alla rete girando su se stesso e vola via di lato, mentre i frutti sotto cadono nel buco che lascia. Remove sfila tutti i frutti della riga, uno dopo l'altro, e la riga diventa una striscia più bassa con Victoria plum removed e Undo: intorno alla freccia di Undo un anello si consuma nei cinque secondi in cui si può tornare indietro (si ferma finché il puntatore o il fuoco stanno sulla striscia); Undo rilancia gli stessi frutti nella borsa. Il totale è scritto grande su un cartellino di carta da pacchi legato con uno spago al nodo in fondo alla rete, con sotto quanto manca alla consegna gratis (€1.35 to free delivery): il cartellino dondola con la borsa, a ogni cifra nuova fa una piccola torsione sullo spago e, a €10, gira due volte su se stesso (il retro è carta vuota) e torna con Free delivery in verde, mentre la consegna barrata diventa Free. Le cifre che cambiano si sfocano e tornano nitide senza muoversi, la quantità prende fiato. Fermando il mouse un attimo su una riga (o col fuoco da tastiera) gli altri frutti nella borsa si fanno trasparenti; il puntatore, o il dito, che passa sulla borsa spinge la rete e i frutti. Pay mostra Processing con una rotella, poi Order placed in verde con la spunta disegnata, mentre la borsa viene sollevata di colpo e ricade sui manici con tutti i frutti che saltano; dopo un po' torna Pay. Con tutte le righe tolte resta Fill it with the market mix, che rimette la borsa di partenza.
Come funziona
Un piccolo mondo a vincoli
Tutto è un corpo con posizione e velocità: il gancio fermo, le due estremità del manico, trenta nodi della rete, ogni frutto e il cartellino. A ogni fotogramma il tempo (al massimo 1/30 di secondo) si divide in dieci passi: la gravità muove i corpi, poi si correggono le posizioni perché rispettino i vincoli (dinamica basata sulle posizioni, alla XPBD) e la velocità nuova è lo spostamento diviso il passo. Quando niente si muove più per una ventina di fotogrammi il ciclo si ferma e non si ridisegna niente.
Corde che tirano soltanto
La rete è una catena di nodi da un capo del manico all'altro: ogni pezzo di corda tira quando è più lungo della sua misura e non spinge mai quando è più corto, così la rete vuota si affloscia e piena si tende. I due cordini dal gancio al manico sono molle con una cedevolezza (la borsa molleggia), il manico è un'asta rigida; il cartellino pende dal nodo in fondo con uno spago che non lo lascia mai ribaltare.
Frutti che spingono, rotolano e fanno presa
Ogni frutto è un cerchio con la sua massa: due frutti che si compenetrano si separano in proporzione all'inverso delle masse, un frutto che passa oltre un pezzo di rete viene rimesso dentro lungo la normale interna e spinge i due nodi in proporzione a dove lo tocca. Lo scivolamento lungo il contatto viene in parte tolto (il cotone fa presa), e quello che resta fa girare il frutto: la velocità d'angolo insegue lo scivolamento diviso il raggio, così rotola davvero. I frutti in arrivo non urtano la rete finché non sono entrati dalla bocca o nel triangolo dei cordini.
La maglia ridisegnata
La rete a rombi non esiste come oggetto: a ogni fotogramma si prende la catena come file di nodi dal manico al nodo in fondo (il nodo k a sinistra con il nodo N meno k a destra) e si tracciano le corde diagonali che la attraversano. Quelle davanti si incurvano in giù, quelle dietro in su e sono più chiare, così la borsa sembra tonda; davanti ai frutti le corde fanno anche una sottile ombra. L'ombra della borsa sul muro è un'ombra di canvas spostata da lontano, sfocata uguale in ogni browser.
Il frutto dipinto e il cartellino
Ogni frutto è dipinto sul canvas: la buccia (pori, rossore, striature, picciolo e foglia) gira col frutto, la luce no, perché la sagoma si costruisce ruotata e si riempie con un gradiente che non ruota. Il cartellino è HTML sopra il canvas: la scatola segue lo spago a ogni fotogramma, la carta dentro gira su se stessa con GSAP in 3D e, quando è di schiena, nasconde le scritte. Un clic da script (l'anteprima della libreria) è un cliente finto: un'arancia e una mela in più, via i limoni, Undo, una prugna in più e una in meno, una mela e un'arancia in meno.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ITEMS | script.js | [['Blood orange', 0.95, 3, 'orange'], …] | Le righe del carrello: nome, prezzo di uno in euro, quanti e frutto (orange, lemon, apple o plum). |
FREE | script.js | 10 | Il subtotale da cui la consegna è gratis e il cartellino gira, in euro. |
DELIVERY | script.js | 3.5 | Quanto costa la consegna sotto quella cifra, in euro. |
MAX | script.js | 5 | Il massimo di frutti di un tipo. |
GRAVITY | script.js | 900 | Quanto forte cadono i frutti, in pixel al secondo al quadrato. |
STRETCH | script.js | 1 | Quanto cede la rete di cotone sotto il peso (0 = non cede). |
TOSS | script.js | 0.55 | I secondi di volo di un frutto prima di entrare nella borsa. |
UNDO | script.js | 5 | I secondi in cui resta Undo dopo aver tolto una riga. |
BRUSH | script.js | 1 | Quanto il puntatore spinge la rete e i frutti (0 = per niente). |
Quando usarla
Per il carrello di un fruttivendolo, di un mercato contadino, di una drogheria o di chi vende pezzi sfusi (frutta, verdura, pane, dolci): un elenco con un totale, una soglia per la consegna gratis e un'anteprima viva, e giocosa, di quello che si sta portando a casa.
Sul telefono
A 390 pixel il carrello è largo 358 e il disegno si rimpicciolisce nella stessa scala, col canvas ridisegnato alla risoluzione dello schermo; tutti i bottoni si toccano col dito e non aspettano il doppio tocco (touch-action manipulation). Il dito che passa sulla borsa la spinge come il mouse e la pagina scorre lo stesso in verticale (touch-action pan-y). Gli altri frutti trasparenti solo col mouse o con la tastiera, mai dopo un tocco.
Con il movimento ridotto
Niente lanci, rimbalzi né oscillazioni: un frutto nuovo viene posato in cima al mucchio, il mondo fisico si risolve subito fino a riposo senza disegnare i passi in mezzo, e il frutto compare in dissolvenza già al suo posto; uno tolto sparisce in dissolvenza e gli altri sono già scesi. Il cartellino non gira: le scritte cambiano in dissolvenza. Le cifre cambiano senza sfocarsi, le righe senza animare l'altezza, il puntatore non spinge la borsa e Pay non la solleva.
Trappole
- Un frutto lanciato da fuori contava come dentro la borsa appena passava sotto la linea di un cordino, anche se era ancora fuori dalla rete: la rete allora lo tirava dentro attraverso le maglie con correzioni enormi, e la borsa si metteva a girare intorno al gancio. Ora conta come dentro solo fra i due capi del manico, e ogni spinta della rete è limitata a 4 pixel per passo.
- Coi frutti lanciati da molto di lato la borsa riceveva tanta spinta da oscillare per secondi e i frutti dopo mancavano la bocca: ora arrivano dall'alto, mirano alla bocca dov'è in quel momento e il manico e i frutti già dentro sono frenati di più.
- Quando la borsa si alleggeriva di colpo (via tutte le prugne) rimbalzava in su e il cartellino, leggero, saliva sopra il nodo e si vedeva capovolto: lo spago adesso è rigido nel nodo e non supera 49 gradi dalla verticale.
- Col massimo di frutti la pila usciva dalla bocca e oltre il bordo alto del riquadro: la borsa è stata allargata e allungata, i frutti rimpiccioliti e il massimo portato a cinque per tipo.
- Un meno premuto subito dopo un più sfilava il frutto che non era ancora partito, ma il suo lancio programmato partiva lo stesso e lo rimetteva nella borsa: il lancio ora controlla che il frutto esista ancora.
- Il retro del cartellino che gira mostrava le scritte a specchio: mentre è di schiena le scritte sono nascoste, e la cifra nuova si scrive proprio lì, quando non si vede.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
