Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola sulla tovaglia
Nello stile minimal, con attrito vero: il trucco della tovaglia. Una parola con grazie sta su una tovaglia vermiglia, una riga sottile che pende dal bordo di un tavolo disegnato a linee. Tirata piano, la tovaglia si porta dietro la parola; strappata di colpo, le scivola via da sotto e le lettere restano quasi ferme, scivolano di pochi pixel, oscillano e prendono peso al passaggio. L’orlo si tira col mouse o col dito, e chi insiste fa cadere la parola dal tavolo.
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>Mise</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole room is the button: a click whips the cloth away, or lays it again; the hem can be pulled by hand -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A word standing on a tablecloth. Press to whip the cloth away from under it.">
<header class="top">
<span class="top__brand">Mise</span>
<span class="top__note">Dinner club, Thursdays at eight</span>
</header>
<svg class="room" data-svg aria-hidden="true">
<path class="table" data-table d="" />
<path class="cloth" data-cloth d="" />
<path class="hem" data-hem d="" />
</svg>
<!-- the word: the script splits it, and every letter slides, leans and falls on its own -->
<h1 class="word" data-word>dinner</h1>
<p class="hint" data-hint>Pull the hem down slowly, or click to whip the cloth away.</p>
<p class="read" data-readout><span class="read__label">The word moved</span> <b class="read__value" data-read>0 px</b></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.
17 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 parola sulla tovaglia» da Animorio e adattala al mio sitoCosa fa
Una stanza bianca calda, in alto il nome di un club di cene inventato, Mise. Un tavolo disegnato con tre righe sottili, il piano che si disegna dal centro e due gambe; una tovaglia vermiglia, una riga sola, si stende sul piano dal bordo di destra e pende giù con un piccolo orlo. Sopra vengono posate le lettere di dinner, una alla volta, ognuna con un colpo di peso. La tovaglia viene tirata piano: l’attrito statico tiene le lettere e la parola va con lei, tutta insieme, di settanta pixel. Poi uno strappo: la tovaglia schizza via da sotto più in fretta di quanto l’attrito possa seguirla e sparisce oltre il bordo. Le lettere sentono solo un colpetto ai piedi: si inclinano di pochi gradi all’indietro, scivolano di qualche pixel sul legno nudo (le ultime un poco di più, perché la tovaglia è passata sotto di loro più a lungo), si raddrizzano con un dondolio e prendono peso nel momento in cui la fine della tovaglia passa sotto di loro. In basso a destra si legge di quanto si è mossa la parola: settanta pixel con la tovaglia tirata piano, sei con lo strappo. Dopo un respiro la tovaglia risale dal bordo e corre sotto la parola: le lettere fanno un saltello mentre passa e tornano al loro posto. L’orlo si prende col mouse o col dito e si tira giù: piano, la parola viene con la tovaglia e, se si insiste, le lettere arrivano al bordo e cadono dal tavolo girandosi; un clic dà lo strappo, o stende di nuovo la tovaglia.
Come funziona
Ogni lettera è un corpo con l’attrito
La parola si divide in lettere, ognuna in uno span con la sua posizione e la sua velocità. A ogni passo della fisica (un milleduecentesimo di secondo dentro gsap.ticker, col fotogramma mai oltre un trentesimo di secondo) si guarda se la lettera sta ancora sulla tovaglia. Sopra la tovaglia: se la differenza di velocità si può annullare con l’attrito statico (GRIP per la gravità per il passo), la lettera va con la tovaglia; altrimenti l’attrito dinamico (SLIDE) la tira solo un poco. Sul legno nudo l’attrito la ferma. La gravità in pixel segue la grandezza del carattere: una lettera è alta circa sei centimetri.
La tovaglia guidata dalla mano
La tovaglia è un solo numero, quanto è stata tirata: la riga sta sul piano dalla sua fine al bordo e da lì pende, tirata abbastanza pende soltanto e scende fuori dalla stanza. GSAP muove il bersaglio (una tirata lenta con sine.inOut, uno strappo che arriva alla sua velocità in due centesimi di secondo e la tiene), e dentro ogni fotogramma la fisica interpola la tovaglia passo per passo, così la sua velocità è continua.
Il colpo ai piedi
L’accelerazione dei piedi di ogni lettera, divisa per la gravità, è l’angolo verso cui la lettera vuole inclinarsi: indietro quando la tovaglia la tira, in avanti quando il legno la frena. Una molla rigida e smorzata insegue quell’angolo, quindi a una tirata lenta le lettere restano diritte (un terzo di grado) e allo strappo dondolano di qualche grado e si assestano. La lettera prende peso sull’asse wght di Newsreader nell’istante in cui la fine della tovaglia le passa sotto.
Rimettere la tovaglia
Una timeline GSAP riporta la tovaglia: la riga risale dal bordo e corre sul piano verso sinistra; quando la sua testa passa sotto una lettera, la lettera fa un saltello (mezzo seno) e intanto torna a casa con power2.inOut. Le lettere cadute dal tavolo ricompaiono in dissolvenza al loro posto. Ogni tirata riparte con l’orologio della fisica azzerato, quindi il giro da solo torna sempre uguale.
L’orlo da tirare
Vicino all’orlo il puntatore diventa una mano: tirando in giù (o a destra) la tovaglia esce dal bordo di quanto si muove il dito, e non torna indietro, perché una tovaglia non si spinge. Piano, la parola segue; le lettere che passano il bordo del tavolo cadono con la gravità girando dalla parte in cui andavano. Lasciato l’orlo, dopo qualche secondo arriva lo strappo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRIP | script.js | 0.45 | L’attrito statico fra tovaglia e lettere: di più e una tirata lenta le porta con più sicurezza. |
SLIDE | script.js | 0.15 | L’attrito mentre la tovaglia scivola sotto: di più e le lettere vengono trascinate più lontano. |
WHIP | script.js | 0.08 | Quanti secondi impiega la tovaglia strappata a uscire da sotto la parola: meno è un trucco più pulito. |
DRIFT | script.js | 70 | Di quanti pixel la tirata lenta porta la parola prima dello strappo. |
LEAN | script.js | 1 | Quanto si inclina una lettera quando la tovaglia le tira i piedi (0 = per niente). |
HOLD | script.js | 1.6 | Quanti secondi la parola resta sul tavolo nudo prima che la tovaglia torni. |
--accent | style.css | #e5432a | Il colore della tovaglia. |
--weight | style.css | 380 | Il peso del carattere della parola, da 200 a 700. |
Quando usarla
Per l’apertura di un ristorante, di un club di cene, di un bistrot o di un catering, per la pagina della prenotazione o del menu, per un mago o uno spettacolo. Funziona con qualunque parola corta, meglio se senza lettere che scendono sotto la riga (dinner, menu, table), perché le lettere stanno in piedi sul piano.
Sul telefono
La stessa fisica, con la gravità misurata sulla grandezza del carattere, quindi lo strappo lascia la parola quasi ferma anche su uno schermo stretto. Il tavolo prende quasi tutta la larghezza, l’orlo si tira col dito (con un’area più larga), un tocco dà lo strappo.
Con il movimento ridotto
Niente si muove davanti agli occhi: il clic fa sparire la tovaglia in dissolvenza e ripresenta la parola dove la lascia lo strappo, calcolato in silenzio fino alla fine, con i pixel di cui si è mossa; un altro clic rimette la tovaglia e la parola a casa, sempre in dissolvenza.
Trappole
- Con uno strappo che arrivava alla sua velocità in un quinto di secondo (power2.in) la tovaglia restava sotto le lettere troppo a lungo e l’attrito le trascinava di centocinquanta pixel, fino al bordo del tavolo: niente trucco. Ora la mano dà uno strattone, due centesimi di secondo, e la tovaglia esce da sotto la parola in otto centesimi; con l’attrito di scivolamento a 0,15 la parola si sposta di sei pixel.
- La parola di prova era supper e la p e la p scendevano sotto il piano del tavolo: le lettere stanno in piedi sulla riga, quindi la parola giusta non ha lettere che scendono.
- Il passaggio della fine della tovaglia sotto una lettera si segnava due volte e nel secondo controllo era già stato cancellato dal primo: la lettera non prendeva mai peso. Ora la fisica alza un segnale e il disegno lo consuma.
- Nel movimento ridotto il numero dei pixel era scritto a mano: ora lo strappo si calcola davvero, in silenzio, e la parola ricompare dove si ferma.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
