La ruota che si arrotonda
Scroll, Fisica
NuovaGratis
Torna alla libreria
L’intestazione con le valigie sul carrello dell’albergo
Scorri dentro l’anteprima
L’intestazione di un albergo inventato, nello stile ricco: nella hall con la carta da parati a righe, il pavimento di marmo a scacchi e l’ascensore d’ottone, scendendo le valigie degli ospiti cadono una alla volta sul carrello portabagagli con una fisica vera, rimbalzano, si incastrano e si impilano; il campanello suona a ogni botta e la lancetta dei piani trema. Risalendo il carrello si svuota, e alla fine arrivano il titolo e il pulsante.
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 suitcases on the hotel 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/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- the header of a made-up hotel, the Larkspur: a lobby with striped wallpaper, a marble floor, the lift with its
brass floor dial and a bellhop's brass luggage cart. Scrolling down, the guests' bags fall onto the cart one by
one with real physics (Matter.js) and pile up; scrolling back up lifts them away again. Tap a bag to bump it -->
<section class="carico" data-carico>
<div class="palco" data-palco>
<canvas class="scena" data-scena role="img" aria-label="A hotel lobby with a brass luggage cart. As you scroll, suitcases, a trunk, a hatbox and a duffel bag fall onto the cart and pile up."></canvas>
<header class="testata">
<p class="marchio"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M5 22h22M8 22a8 8 0 0 1 16 0M16 10v4M13 10h6"/></svg><span>Hotel Larkspur</span></p>
<p class="sotto">Since 1931, by the station</p>
</header>
<p class="targa" data-targa aria-live="polite"><span class="targa__su">Now loading</span><span class="targa__nome" data-targa-nome>The lobby</span></p>
<div class="finale" data-finale>
<h1 class="finale__titolo">We carry <em>the rest.</em></h1>
<p class="finale__testo">Leave your bags at the door. They’ll be in your room before you are.</p>
<a class="tasto" href="#" data-tasto><span>Book a room</span></a>
</div>
<p class="cenno" data-cenno><span>Scroll to load the cart</span><svg viewBox="0 0 12 16" aria-hidden="true"><path d="M6 1v13M1 9l5 5 5-5"/></svg></p>
</div>
</section>
<section class="dopo">
<p class="dopo__marchio">Hotel Larkspur</p>
<h2 class="dopo__titolo">Forty rooms, one brass cart.</h2>
<p class="dopo__testo">Our porters meet every train. Your luggage goes up the old lift, you go up the stairs.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.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.
35 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 «L’intestazione con le valigie sul carrello dell’albergo» da Animorio e adattala al mio sitoCosa fa
Nella hall dell’Hotel Larkspur, con la carta da parati a righe crema e le gigliature, lo zoccolo bordeaux a pannelli e il pavimento di marmo a scacchi verdi in prospettiva, il carrello portabagagli d’ottone aspetta vuoto sul tappeto rosso, coi tubi lucidi, la sbarra curva in cima e le quattro rotelle. Accanto ci sono l’ascensore a grata col quadrante dei piani, una palma nel vaso e un tavolino di marmo col campanello. Scendendo, le valigie cadono dall’alto una alla volta e sono corpi veri: il baule di cuoio con le cinghie e gli angoli d’ottone, la valigia rigida verde acqua a costole con le ruote e gli adesivi di viaggio, la valigia rossa, la cappelliera a righe col fiocco, il borsone con la cerniera e i manici, il beauty case con lo specchio e la ventiquattrore della camera 214. Rimbalzano, si girano, si incastrano e si impilano fra i montanti; le etichette dondolano a ogni urto, si alza uno sbuffo di polvere, il campanello suona e la lancetta del quadrante trema. La targa d’ottone in alto dice quale valigia sta arrivando. Risalendo le valigie volano via in ordine inverso e il carrello si svuota; in fondo arrivano We carry the rest. e il pulsante Book a room. Col dito o col clic si dà un colpetto alla valigia in cima.
Come funziona
Lo scroll conta, la fisica cade
Lo scroll muove con scrub un numero da 0 a 1 e da lì si sa quante valigie devono stare sul carrello. La fisica invece gira nel tempo vero: se ne mancano, ne cade una nuova dall’alto (al massimo una ogni 0,3 secondi); se ce ne sono troppe, l’ultima arrivata diventa ferma e vola su. Così lo scrub non può mai mettere una valigia a metà caduta.
Il carrello è fatto di corpi fermi
Matter.js ha il pianale, i due montanti, il pavimento e due pareti ai lati, tutti statici: le valigie sono rettangoli smussati (chamfer) e la cappelliera un cerchio, con attrito alto perché la pila stia su. Il motore avanza a passi fissi di 1/60 di secondo accumulati nel ticker di GSAP, uguale su ogni schermo.
Le misure vengono dalla casella
Tutto è disegnato in unità s, il minimo fra larghezza diviso 640 e altezza diviso 780: il carrello, le valigie e i fermi crescono e calano insieme, e la pila sta nella casella del telefono come sul computer. Al resize i fermi si rifanno e le valigie ricadono.
Gli urti fanno suonare la hall
Su collisionStart, se la velocità dell’urto supera una soglia, il campanello riceve una spinta e la lancetta dei piani un colpo: tutti e due sono molle smorzate calcolate a ogni fotogramma. Le etichette appese alle valigie sono altre molle legate alla velocità di rotazione del corpo.
Il fondo si disegna una volta
Carta da parati, zoccolo, marmo con le venature, ascensore e palma vanno su un canvas di scorta disegnato una volta sola (e di nuovo quando arrivano i caratteri o cambia la misura); a ogni fotogramma si copia e sopra si disegnano carrello, valigie, campanello e quadrante.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HOTEL | script.js | 'Hotel Larkspur' | Il nome dell’albergo sulla targa del carrello. |
BAGS | script.js | 7 | Quante valigie scendono sul carrello, da 3 a 7. |
GRAVITY | script.js | 1.1 | La gravità: più alta, le valigie cadono e si posano più in fretta. |
BOUNCE | script.js | 0.18 | Quanto rimbalzano le valigie quando toccano. |
SCREENS | script.js | 5.6 | Quanto è lungo il carico, in schermate di scroll. |
BUMP | script.js | 1 | Quanto salta la valigia in cima al tocco o al clic. |
Quando usarla
Per l’intestazione di un albergo, di un bed and breakfast o di una casa vacanze, di un servizio di deposito o di trasporto bagagli, di un negozio di valigie, di un’agenzia di viaggi o di un’app per fare le valigie; e per ogni pagina dove scendendo si riempie qualcosa, un carrello, un ordine, una lista.
Sul telefono
La stessa animazione con le misure adattate: carrello e valigie si misurano sul lato più piccolo della casella, quindi la pila sta intera anche sul telefono; l’ascensore e la palma restano ai lati, in parte fuori dal bordo. Il tocco fa saltare la valigia in cima e lo scroll col dito resta libero.
Con il movimento ridotto
Niente cadute né rimbalzi né scorrimento morbido: la pila si calcola in silenzio all’apertura e resta ferma, e scendendo ogni valigia compare con una dissolvenza al suo posto; il campanello e la lancetta non si muovono.
Trappole
- Lo scroll non deve muovere i corpi: deve dire solo quanti ce ne vogliono. Se si legasse la posizione della valigia allo scrub, la fisica non avrebbe niente da fare e risalendo la pila esploderebbe.
- Il motore va a passi fissi (1/60 s accumulati), non al delta del fotogramma: con un passo variabile su uno schermo a 120 Hz le valigie si comportano in un altro modo e la pila crolla.
- Una valigia che se ne va va resa statica prima di spostarla, se no spinge via le altre mentre sale.
- Per la versione ridotta la pila si prepara facendo girare il motore a vuoto per ogni valigia, poi i corpi diventano statici: così è uguale a quella vera.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Matter.js 0.20.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB, Matter.js 25 KB.
Collaudo
Provata il 23 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.
