Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Le carte stese sul tavolo
Nello stile minimal: cinque carte bianche dal contorno sottile, impilate dritte, con una parola nell’angolo di ognuna. Il puntatore che si avvicina le stende di lato in fila come un mazzo sul tavolo, ognuna sulla sua molla e un attimo dopo l’altra, finché le parole si leggono come una frase; la carta sotto il puntatore si alza di qualche pixel e prende il rosso. Lontano le carte si raccolgono e la pila si pareggia con un ultimo colpetto.
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>Cards laid on the table</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" data-stage>
<!-- the sentence people read; the cards below are only its picture -->
<h1 class="sr" data-read>Lay your cards on the table.</h1>
<!-- five white cards squared in a stack, one word in the corner of each. As the pointer (or a finger) comes close,
the deck spreads sideways like cards laid on a table, every card on a spring of its own and a moment after
the one before; the card under the pointer lifts a few pixels and takes the accent. Far away, the deck
gathers back into a stack and squares up with a last small tap -->
<div class="table" aria-hidden="true" data-table>
<div class="ruler" data-ruler>
<i class="ruler__line" data-line></i>
</div>
<div class="deck" data-deck></div>
</div>
<!-- the same thing for the keyboard: focus spreads the deck, the arrows move from card to card -->
<div class="handle" role="slider" tabindex="0" aria-label="Cards on the table" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1" data-handle></div>
<p class="note" aria-hidden="true" data-note>
<span class="note__rule"></span>
<span class="note__hint" data-hint>Move closer</span>
<span class="note__rule"></span>
</p>
<!-- an invisible word, to measure how wide the words are -->
<span class="probe" aria-hidden="true" data-probe></span>
</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.
19 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 «Le carte stese sul tavolo» da Animorio e adattala al mio sitoCosa fa
Su un bianco caldo, una pila di cinque carte bianche col bordo di un pixel: si vede la carta in cima, con «Lay» nell’angolo in alto a destra, e sotto e a destra i bordi delle altre, sfalsati di un pixel e mezzo come in un mazzo vero. Sotto la pila corre un righello sottile con una tacca a ogni capo. All’arrivo le carte cadono sul tavolo una dopo l’altra, dalla più bassa, e la pila si pareggia con un colpetto. Quando il puntatore si avvicina il mazzo si stende come lo stende una mano sul tavolo: la pila scivola verso l’inizio della fila e le carte escono da sotto una dopo l’altra, ognuna sulla sua molla, con un pixel di troppo e il ritorno. Ogni carta lascia scoperta una striscia di quella sotto, e le parole negli angoli si leggono in fila: «Lay your cards on the table.». Mentre una carta corre la sua parola si stringe sull’asse della larghezza e torna larga quando si ferma. La carta sotto il puntatore si alza di qualche pixel con un piccolo rimbalzo, il bordo e la parola diventano rossi, la parola prende peso e la riga sotto si allunga; sul righello la sua tacca si allunga e diventa rossa. Il righello segue la fila, con una tacca al bordo destro di ogni carta. Quando il puntatore si allontana le carte si raccolgono partendo dall’ultima, la pila torna al centro e, appena è ferma, si pareggia con un ultimo colpetto: i bordi sotto si aprono di un capello e si richiudono, e le tacche del righello saltano.
Come funziona
Cinque carte e un righello
Le carte nascono dallo script, una per ogni parola di WORDS: un div che lo script sposta e dentro una faccia col fondo bianco, il bordo fatto con un box-shadow inset di un pixel, la parola nell’angolo in alto a destra e una riga sottile sotto. La prima carta sta sopra a tutte (z-index più alto) e ognuna lascia scoperta la striscia destra di quella sotto: la parola sta proprio lì. Il righello è una riga di un pixel allargata con scaleX e una tacca per carta allungata con scaleY, così si muovono solo con transform.
Quanto è vicino il puntatore
A ogni fotogramma lo script misura la distanza fra il puntatore e il rettangolo che le carte occupano in quel momento, e la trasforma in un desiderio da 0 (chiuso) a 1 (aperto) con una curva morbida: aperto entro un terzo di REACH, chiuso oltre REACH. Siccome il rettangolo cresce mentre il mazzo si apre, la pila che comincia ad aprirsi si avvicina al puntatore da sola e si apre del tutto, e quella che comincia a chiudersi si chiude del tutto: niente carte che restano a metà e tremano sul confine.
Un attimo dopo l’altra
Lo script tiene i desideri dell’ultimo mezzo secondo con la loro ora. Ogni carta legge il desiderio di DELAY secondi fa moltiplicato per la sua posizione: aprendo la prima a partire è la pila intera, che scivola all’inizio della fila, poi le carte escono da sotto dalla seconda all’ultima; chiudendo l’ordine si rovescia, l’ultima carta torna per prima e la pila torna al centro per ultima. La posizione di una carta è (i × q − metà × g) × la striscia, dove q è quanto è uscita lei e g quanto è scivolata la pila: da ferma la fila è sempre centrata.
Una molla per carta
Ogni carta ha la sua molla smorzata, un po’ più morbida di quella sopra, che insegue il suo desiderio; la fa avanzare gsap.ticker, a piccoli passi da 1/240 di secondo così resta stabile anche con un fotogramma in ritardo. BOUNCE abbassa lo smorzamento: con 0,4 la carta va oltre di un paio di pixel e torna. Dalla velocità della molla viene anche la parola che si stringe mentre corre (asse wdth di Archivo, fino a 76).
La carta sotto il puntatore e il colpetto finale
La carta sotto il puntatore è la prima dall’alto il cui rettangolo lo contiene, senza contare il suo sollevamento, così non scappa da sotto il puntatore mentre sale. Ha una seconda molla, più viva, che la alza di LIFT pixel, e un accento da 0 a 1 che sfuma in fretta: bordo, parola, riga e tacca passano dall’inchiostro al rosso, la parola va da 380 a WEIGHT. Quando il mazzo torna chiuso un tween di GSAP porta un numero da 1 a 0 con elastic.out: lo spessore della pila e le tacche lo seguono, e la pila si pareggia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Lay', 'your', 'cards', 'on the', 'table.'] | Le parole: una carta per parola, da 2 a 7. La prima sta in cima alla pila. Parole corte, perché ognuna deve stare nella sua striscia. |
REACH | script.js | 200 | Quanto deve avvicinarsi il puntatore, in pixel dal bordo delle carte, perché il mazzo si stenda (al telefono il 70%). |
STEP | script.js | 0.74 | Quanto di ogni carta lascia scoperto quella dopo, in parte della larghezza: 0,4 un mazzo stretto, 1 le carte una accanto all’altra. |
DELAY | script.js | 0.06 | Quanto aspetta ogni carta dopo quella prima, in secondi: 0 partono tutte insieme. |
BOUNCE | script.js | 0.4 | Quanto le carte vanno oltre il loro posto prima di fermarsi: 0 niente, 1 un piccolo rimbalzo. |
LIFT | script.js | 8 | Di quanti pixel si alza la carta sotto il puntatore. |
WEIGHT | script.js | 680 | Il peso della parola sulla carta sotto il puntatore, da 300 a 900; le altre pesano 380. |
SPEED | script.js | 1 | La velocità delle molle: 2 è il doppio, 0,5 la metà. |
Quando usarla
Per poche parole che si scoprono avvicinandosi: uno slogan in una pagina di presentazione, i servizi di uno studio, le portate di un menu degustazione, i giorni di un festival, i passi di un metodo. Funziona con parole corte e da tre a sette carte; con frasi lunghe meglio un testo normale.
Sul telefono
Uguale, con le carte più piccole perché la fila aperta stia nella larghezza dello schermo: il dito che tocca vicino alle carte le stende, la carta sotto il dito si alza, e un attimo dopo che il dito si è staccato il mazzo si richiude.
Con il movimento ridotto
Niente spostamenti: la fila è già stesa al suo posto e arriva in dissolvenza; la carta sotto il puntatore non si alza, prende solo il rosso e il peso con una sfumatura.
Trappole
- All’arrivo le carte entrano in dissolvenza e una carta mezza trasparente lasciava vedere le parole delle carte sotto: le parole coperte restano nascoste finché l’arrivo non è finito.
- Nella pila chiusa le tacche del righello di tutte le carte cadevano nello stesso punto e facevano un grumo scuro: le tacche delle carte ancora nella pila svaniscono e restano solo quelle ai due capi.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
