Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il peso nella clessidra
Animazione di testo nello stile minimal: due parole, «heavy» sopra e «light» sotto, e in mezzo una clessidra di linee sottili. Il peso delle lettere scende come la sabbia: quelle in alto si svuotano dal centro ai lati, un filo arancio cade e quelle in basso si riempiono e si posano. Poi la clessidra si gira con tutto il resto e si ricomincia.
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>Weight in the hourglass</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" aria-label="heavy, light">
<!-- the hourglass: two hairline bulbs, the sand and the thin stream, drawn by the script -->
<svg class="glass" data-glass aria-hidden="true">
<g data-turn>
<path class="sand" data-sand-a d="" />
<path class="sand" data-sand-b d="" />
<path class="bulbs" data-bulbs d="" />
<path class="caps" data-caps d="" />
</g>
<path class="stream" data-stream d="" />
</svg>
<!-- the two words: the weight drains from one into the other -->
<p class="word" data-word-a aria-hidden="true"></p>
<p class="word" data-word-b aria-hidden="true"></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.
12 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 peso nella clessidra» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero ci sono due parole una sopra l’altra, e in mezzo una clessidra disegnata con due triangoli di linee sottili grigie, chiusa sopra e sotto da due righe chiare. La parola in alto, «heavy», è nerissima e larga; quella in basso, «light», sottilissima e stretta. Nel bulbo in alto c’è la sabbia arancio. La sabbia comincia a scendere: la sua superficie affonda al centro, un filo arancio cade dal collo fino al fondo e sotto si forma un mucchietto che cresce. Intanto le lettere di «heavy» si svuotano dal centro verso i lati, diventano sottili e strette, e quelle di «light» si riempiono nello stesso ordine, poco dopo, si allargano e prendono peso; ogni lettera piena si posa con un piccolo schiacciamento e torna su con una molla. Quando la sabbia è passata tutta, il filo si stacca e cade. Dopo una pausa la clessidra si gira: tutto si capovolge intorno al centro come un foglio girato, le parole si schiacciano fino a una riga e si scambiano di posto senza mai rovesciarsi, la clessidra si ferma con un’oscillazione e le parole sentono il colpo. Ora in alto c’è «light», piena, e la sabbia scende di nuovo: si svuota lei e si riempie «heavy». Un altro giro e tutto è com’era all’inizio.
Come funziona
Il peso come quantità
Ogni lettera ha un numero da 0 a 1, la sua quota di peso: a 1 è piena (wght 900, wdth 114 di Archivo), a 0 vuota (wght 110, wdth 74). GSAP muove solo questi numeri, dal centro della parola verso i lati, e la sabbia di ogni bulbo è la media delle lettere della sua parola: quello che si vede nella clessidra e quello che si legge nelle parole sono la stessa cosa.
La sabbia con la geometria vera
I bulbi sono triangoli, quindi la sabbia appoggiata al collo sale con la radice della quantità (l’area cresce col quadrato dell’altezza) e quella sul fondo con 1 meno la radice di 1 meno la quantità. La superficie in alto affonda al centro con una curva quadratica mentre la sabbia scende; quella in basso fa un mucchietto che è alto a metà riempimento e piatto alla fine.
Il filo
Il filo che cade è una linea con una testa e una coda, tutte e due da 0 (il collo) a 1 (la sabbia in basso): all’inizio corre la testa, alla fine la coda, così il filo si stacca e cade invece di sparire.
Il giro come un foglio
La clessidra e le parole stanno in un mondo schiacciato in altezza dal coseno di un angolo: da 0 a pi greco tutto passa per una riga e si ribalta, e le parole si scambiano di posto. Le parole però usano il valore assoluto del coseno, così restano dritte. Quale bulbo è in alto si decide dal segno del coseno: la sabbia cambia appoggio proprio quando tutto è piatto e non si vede.
L’assestamento
Alla fine del giro la clessidra ruota di due gradi e torna con un elastic.out, e la distanza delle parole dal centro cresce del 3,5% e torna: è il colpo della clessidra che si posa sul tavolo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD_TOP | script.js | 'heavy' | La parola che parte in alto, piena (fino a 9 lettere). |
WORD_BOTTOM | script.js | 'light' | La parola che parte in basso, vuota (fino a 9 lettere). |
FLOW | script.js | 2.8 | Secondi che il peso impiega a passare da una parola all’altra. |
FLIP | script.js | 1.1 | Secondi del giro della clessidra. |
HEAVY | script.js | 900 | Il peso di una lettera piena (100 a 900). |
LIGHT | script.js | 110 | Il peso di una lettera vuota (100 a 900). |
WIDTH | script.js | true | Le lettere piene sono anche più larghe (asse wdth), quelle vuote più strette. |
PAUSE | script.js | 0.9 | Secondi di pausa prima di ogni giro. |
Quando usarla
Per dire che il tempo passa o che qualcosa si sta preparando: un conto alla rovescia prima di un lancio o di un evento, la pagina di un’offerta a tempo, un caricamento, un portfolio di tipografia che mostra gli assi di un carattere variabile, un sito che parla di pesi e misure.
Sul telefono
La stessa animazione con le misure adattate: le parole riempiono quasi tutta la larghezza, la clessidra è alta al massimo un decimo dello schermo e fra lei e le parole resta l’aria per le lettere che scendono sotto la riga.
Con il movimento ridotto
Niente si muove: le due parole e la clessidra con la sabbia in alto compaiono in dissolvenza e restano ferme.
Trappole
- Con l’asse wdth una parola piena è molto più larga di una vuota: scegliendo la grandezza sulla parola com’è all’inizio, «light» piena uscirebbe dallo schermo. Si misurano tutte e due le parole tutte piene e si sceglie la grandezza sulla più larga.
- Schiacciate col coseno vero, dopo il giro le parole si leggerebbero a testa in giù. Usano il valore assoluto, così si schiacciano fino a una riga e si riaprono dritte dall’altra parte.
- Dopo il giro la sabbia del bulbo finito in basso non deve più stare appoggiata al collo ma al fondo: quale bulbo è in alto si decide dal segno del coseno, e la sabbia cambia appoggio nell’istante in cui tutto è piatto, quando non si vede.
- Sul telefono la coda della «y» di «heavy» quasi toccava la clessidra: la distanza delle parole dal centro è cresciuta da 0,62 a 0,74 volte la grandezza del carattere.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 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.
