Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
I biglietti da sfogliare
Nello stile minimal: una pila di biglietti da visita bianchi e sottili, una riga di testo ciascuno. Il primo si prende in qualunque punto e gira attorno a quel punto come la carta su un tavolo; lanciato vola via girando, appena è libero torna indietro, scivola sotto e si posa in fondo alla pila, mentre gli altri salgono di un posto su molle sfalsate.
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>Halden Vos, business cards</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hubot-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole table is the button that sends the top card to the bottom; the top card can be dragged and thrown -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A stack of business cards. Press to send the top card to the bottom of the stack.">
<div class="pile" data-pile aria-hidden="true"></div>
<p class="hint" data-hint>Drag the top card and throw it</p>
<p class="sr" aria-live="polite" data-live></p>
</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.
28 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 «I biglietti da sfogliare» da Animorio e adattala al mio sitoCosa fa
Un tavolo grigio caldo e, in mezzo, i sei biglietti da visita di uno studio inventato, Halden Vos: cartoncini bianchi con un filo di bordo, un poco storti uno sull’altro, ognuno con una sola riga in basso a sinistra, il nome in nero e il ruolo. All’inizio i biglietti cadono sul tavolo uno alla volta, dal fondo della pila, e ognuno atterra su una molla, un po’ più grande finché è in aria e poi giù al suo posto. Solo il biglietto in cima porta il colore: quando arriva in cima la sua riga si apre sull’asse della larghezza del carattere con un elastico, e il ruolo passa dal grigio al rosso. Il biglietto in cima si prende col mouse o col dito in qualunque punto: si solleva un poco, l’ombra si allarga e cade sempre dritta in giù, e tirato da un angolo gira attorno a quel punto e si mette in scia come un foglio vero. Lasciato piano torna al suo posto con un piccolo rimbalzo; lanciato, o premuto senza trascinarlo, si tira indietro di un pelo e parte girando su sé stesso. Appena non tocca più gli altri cambia strato, torna indietro facendo la curva, scivola sotto la pila e si posa in fondo; arrivando dà una spinta leggera a quelli che ha sopra, più forte al biglietto più in basso. Intanto gli altri salgono di un posto ciascuno, dall’alto verso il basso, uno dopo l’altro su molle che rimbalzano appena, e cambiano anche il loro angolo; quelli più in fondo sono un soffio più scuri.
Come funziona
Un corpo rigido per biglietto
Ogni biglietto è un div con posizione, angolo, velocità, velocità di rotazione e un «sollevamento» che diventa la scala e l’ombra. Lo script li muove a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker e scrive solo il transform: translate3d, rotate e scale. Ogni posto della pila ha il suo angolo e il suo piccolo spostamento, scritti in due elenchi, così la pila ferma è sempre la stessa; quando tutto è fermo la fisica si addormenta e mette ogni biglietto al suo posto esatto.
La mano tiene un punto
Al pointerdown si calcola il punto del biglietto sotto la mano, nelle sue coordinate (ruotate all’indietro dell’angolo). Mentre si trascina, una molla rigida tira quel punto verso la mano: la forza sposta il biglietto e, moltiplicata vettorialmente per il braccio, lo fa girare in proporzione al suo momento d’inerzia ((L² + A²) / 12). Il tavolo frena al centro, quindi tirato da un angolo il biglietto si mette in scia da solo, senza nessuna regola sull’inclinazione.
Il lancio e il ritorno sotto la pila
Lasciando, la velocità si misura sugli ultimi 90 millisecondi del puntatore: sopra THROW il biglietto vola, con la velocità tenuta fra un minimo (per uscire sempre dalla pila) e un massimo, e frenato dall’aria. Un test fra rettangoli ruotati (gli assi separatori dei due rettangoli) dice quando non tocca più nessun altro biglietto: solo allora il suo z-index scende sotto tutti, così il cambio di strato non si vede mai. Poi una molla più morbida lo riporta al posto in fondo, con l’angolo più vicino nel verso in cui stava girando, così finisce il giro invece di svitarsi.
La pila che sale a onda
Quando il biglietto in cima parte, l’ordine della pila cambia subito, ma ogni biglietto passa al posto nuovo con un ritardo di RIPPLE secondi per posizione: quello nuovo in cima per primo, l’ultimo per ultimo. Ognuno ci va con la sua molla (SETTLE: frequenza e smorzamento) e un piccolo colpo al sollevamento, quindi la pila sale come un’onda. Il biglietto che rientra sotto, posandosi, dà a quelli sopra una spinta nella direzione in cui arrivava, più forte in basso e quasi niente in cima.
Il colore e la tipografia
Il carattere è Hubot Sans variabile, con gli assi del peso e della larghezza (font-stretch). Il biglietto che arriva in cima riceve un gsap.fromTo sulle variabili --wd e --wg, dalla riga stretta e leggera a quella piena, con elastic.out: la riga si apre come un respiro. Il ruolo passa dal grigio al rosso con gsap.to sul colore e torna grigio quando il biglietto rientra sotto. L’ombra del sollevamento è un livello dentro il biglietto, spostato dell’angolo opposto, così cade sempre in giù. Con il movimento ridotto il biglietto sparisce in dissolvenza e ricompare sotto gli altri, senza spostarsi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CARDS | script.js | [['Halden Vos', 'Studio'], ['Mira Halden', 'Partner'], …] | I biglietti, dal primo in cima: un nome e un ruolo, sulla stessa riga. |
THROW | script.js | 650 | Quanto veloce, in pixel al secondo, va lasciato un biglietto perché voli via: più piano torna al suo posto. |
REACH | script.js | 0.8 | Quanto lontano vola il biglietto lanciato prima di tornare indietro, in larghezze del biglietto. |
SPIN | script.js | 1 | Quanto gira il biglietto lanciato: 0 non gira, 2 il doppio. |
SETTLE | script.js | [4.2, 0.48] | Le molle della pila: quanto sono svelte, in hertz, e quanto sono frenate (1 = nessun rimbalzo). |
RIPPLE | script.js | 0.05 | I secondi fra un biglietto e il successivo mentre la pila sale di un posto. |
LIFT | script.js | 0.05 | Quanto si ingrandisce un biglietto sollevato dal tavolo. |
--accent | style.css | #d6452c | Il colore del ruolo sul biglietto in cima, l’unico colore della pagina. |
Quando usarla
Per la pagina «chi siamo» o i contatti di uno studio, di un’agenzia o di un freelance, per un portfolio che presenta le persone una alla volta, per la squadra di una landing page o i relatori di un evento: ogni biglietto è una persona, e sfogliarli è già il gioco.
Sul telefono
La stessa fisica con il biglietto più piccolo rispetto allo schermo. Si trascina e si lancia col dito; un tocco lo lancia da solo, e su uno schermo alto il biglietto parte verso l’alto, dove c’è spazio, invece che di lato.
Con il movimento ridotto
Niente si muove: la pila compare in dissolvenza tutta insieme. Il clic o il tocco fa sparire il biglietto in cima in dissolvenza; ricompare sotto gli altri e il ruolo del nuovo primo prende il colore.
Trappole
- Il primo lancio automatico partiva verso l’alto con una diagonale fissa: sullo schermo largo del computer il biglietto usciva dalla cima della pagina e il ritorno sotto la pila non si vedeva. La direzione ora dipende dalla forma dello schermo: di lato su quello largo, in su su quello alto del telefono.
- Il biglietto che rientrava era scurito come quelli in fondo già mentre era in volo fuori dalla pila, e sembrava un foglio grigio: lo scuro arriva solo quando è posato. Allo stesso modo la sua ombra di sollevamento, girando sotto la pila, faceva un alone intorno a tutta la pila: sotto non ha ombra.
- Con le dissolvenze dell’entrata un biglietto per volta, mentre arrivavano si vedevano due righe di testo una sopra l’altra, quella del biglietto che compariva e quella di sotto: l’opacità ora arriva in sette centesimi di secondo e, con il movimento ridotto, si dissolve la pila intera.
- Il primo clic, arrivato poco dopo l’entrata, veniva ignorato: la pila si diceva pronta solo alla fine di tutta la timeline d’apertura, compresa la scritta in basso. Ora è pronta appena l’ultimo biglietto è sul tavolo.
Librerie
GSAP 3.15.0, Hubot Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
