Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
Il pulsante a clessidra
Un pulsante Download · 248 MB che, premuto, si apre intorno a una piccola clessidra di vetro: la sabbia cade davvero granello per granello dal bulbo di sopra a quello di sotto, scava un cratere in alto e si ammucchia in un cono in basso, e la sabbia passata dal collo è l’avanzamento del download. Alla fine la clessidra si capovolge su una molla e il pulsante dice Open file.
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 hourglass button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the hourglass button: pressed, it opens up round a little glass hourglass. The sand is a cellular automaton on
a canvas, grain by grain, and the grains let through the neck are the progress of the download. At the end the
hourglass turns over on a spring and the button opens the file -->
<div class="dl" data-dl>
<button class="dl__btn" type="button" aria-describedby="dl-progress" data-btn data-autoclic>
<!-- the hourglass: walnut caps and brass posts, the sand, and the glass over it -->
<span class="dl__glass" aria-hidden="true" data-glass>
<span class="dl__cap dl__cap--top"></span>
<span class="dl__post dl__post--left"></span>
<span class="dl__post dl__post--right"></span>
<svg class="dl__back" data-back></svg>
<canvas class="dl__sand" data-sand></canvas>
<svg class="dl__vial" data-vial></svg>
<span class="dl__cap dl__cap--bottom"></span>
</span>
<span class="dl__icon" aria-hidden="true" data-icon>
<svg viewBox="0 0 24 24"><path class="dl__arrow" d="M12 4.5v10.5M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>
</span>
<!-- the words: one line at rest, two lines while it works -->
<span class="dl__rest" aria-hidden="true" data-rest>
<span class="dl__title">Download</span>
<span class="dl__size">· 248 MB</span>
</span>
<span class="dl__busy" aria-hidden="true" data-busy>
<span class="dl__title" data-title>Downloading</span>
<span class="dl__meta" data-meta>0% · 0 of 248 MB</span>
<span class="dl__hint" data-hint>Press to pause</span>
</span>
<span class="dl__done" aria-hidden="true" data-done>
<span class="dl__title">
<svg class="dl__file" viewBox="0 0 24 24"><path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z"/><path d="M14 3.5V8h4.5"/><path d="M9 13h6M9 16.5h4"/></svg>
Open file
</span>
<span class="dl__meta">field-notes.pdf · 248 MB</span>
</span>
<span class="sr" data-name>Download field-notes.pdf, 248 megabytes</span>
</button>
<span class="sr" id="dl-progress" role="progressbar" aria-label="Download progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-progress></span>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
29 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 pulsante a clessidra» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola scura con una freccia color sabbia e la scritta Download · 248 MB. Col mouse sopra il bordo si scalda di color sabbia e la freccia scende e risale come a scaricare. Premendo, la pillola si allarga e si alza con un piccolo rimbalzo, la freccia e la scritta svaniscono e a sinistra compare, girando appena, una clessidra di vetro fra due tappi di noce e due colonnine d’ottone, col bulbo di sopra pieno di sabbia; a destra Downloading, la percentuale coi megabyte e Press to pause. La sabbia comincia a passare dal collo un granello alla volta, in un filo sottile che cade nel bulbo di sotto: lì i granelli si ammucchiano in un cono che si allarga scivolando sui fianchi, mentre in alto la superficie si incava in un imbuto. Il download va a strappi e il filo si dirada e si infittisce con lui, perché il collo lascia passare solo i granelli che il download ha raggiunto, e la percentuale conta proprio quelli. Premendo durante il download il collo si chiude subito: gli ultimi granelli finiscono di cadere e la scritta dice Paused e Press to resume. Quando è passato l’ultimo granello la clessidra si capovolge su una molla, oscilla un poco e si ferma; la sabbia, ora in alto, si assesta sul collo, e a destra compare Open file con l’icona di un documento e field-notes.pdf · 248 MB. Premendo ancora la pillola si richiude e torna Download.
Come funziona
Una griglia di granelli
La clessidra è una griglia di 27 × 47 celle, due pixel ciascuna, disegnata su un canvas della stessa misura e ingrandita con image-rendering: pixelated, così ogni granello resta un quadratino netto. Una seconda griglia dice quali celle stanno dentro il vetro: la mezza larghezza a ogni altezza è una curva che si stringe in fretta verso il collo, largo una cella sola, e la stessa curva, un poco più larga, è il tracciato SVG del vetro.
Le regole della sabbia
A ogni passo si guarda la griglia dal basso in alto (così un granello si muove una volta sola) e una riga sì e una no nel verso opposto. Un granello scende se la cella sotto è libera, altrimenti prova una diagonale a caso e poi l’altra; con probabilità REPOSE scivola di due celle di lato sopra il vicino, e questo appiattisce i mucchi sotto i 45 gradi delle regole semplici. Sul gradino del vetro scivola verso il centro. FALL passi per fotogramma fanno la velocità della caduta.
Il collo è il download
La cella del collo è un cancello: un granello ci entra solo finché i granelli passati sono meno di quelli permessi. Il download finto è una timeline GSAP a strappi che porta l’avanzamento da 0 a 1 in SECONDS secondi, e a ogni aggiornamento i granelli permessi diventano avanzamento × granelli totali. La percentuale scritta è passati / totali: la sabbia caduta è davvero l’avanzamento. In pausa i permessi diventano subito i passati e il filo si interrompe.
Colori e luce del vetro
Ogni granello ha uno dei colori di GRAINS, scelto da un generatore fisso, e i granelli in superficie sono un po’ più chiari, quelli sotto tre strati un po’ più scuri: i coni e i crateri si leggono senza contorni. Il vetro sono due SVG ai lati del canvas: dietro una tinta appena più chiara, davanti il bordo e i riflessi, tratti che seguono la curva di ogni bulbo un poco all’interno, lunghi a sinistra e corti a destra.
La capovolta su una molla
Quando l’ultimo granello è passato e la sabbia è ferma, l’angolo della clessidra va verso 180 gradi su una molla smorzata (rigidezza 70, smorzamento BOUNCE) e intanto la clessidra si rimpicciolisce appena, perché gli angoli non arrivino alle parole. A molla ferma l’angolo torna a 0 e la griglia si rovescia (girare di 180 gradi è invertire l’ordine delle celle): l’immagine è la stessa, e la sabbia che pendeva dal tappo cade sul collo chiuso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIZE | script.js | 248 | La misura del file, in megabyte. |
SECONDS | script.js | 6 | Quanto dura il download finto, in secondi. |
FILL | script.js | 0.74 | Quanto è pieno il bulbo di sopra all’inizio. |
REPOSE | script.js | 0.3 | Quanto scivolano di lato i granelli: 0 = mucchi ripidi a 45 gradi, 1 = mucchi bassi. |
FALL | script.js | 4 | Di quante celle cade un granello a ogni fotogramma. |
BOUNCE | script.js | 0.3 | La molla della capovolta: basso, oscilla prima di fermarsi; 1, si ferma e basta. |
GRAINS | script.js | ['#e6be78', '#dcb26a', '#eecb8c', '#d2a660', '#c79a56', '#f2d7a0'] | I colori dei granelli. |
Quando usarla
Per un download, un’esportazione, un backup o un caricamento che dura qualche secondo: dove l’attesa c’è comunque e la clessidra la rende piacevole, e dove poi c’è un’azione naturale (aprire il file). Sta bene in un’app desktop, in una pagina di download, in uno strumento creativo. Per operazioni di un istante è troppo.
Sul telefono
La pillola aperta è larga al massimo 330 pixel e sta in uno schermo di 390 senza sforare; sotto i 380 pixel la clessidra e le parole si avvicinano al bordo. Il tocco fa partire, mette in pausa e riprende, e l’invito dice Tap to pause invece di Press to pause.
Con il movimento ridotto
La pillola cambia misura di colpo, le parole e la clessidra compaiono in dissolvenza senza scorrere né girare. La sabbia non si vede cadere: a ogni cinque per cento l’automa corre fino in fondo nello stesso fotogramma e la clessidra mostra subito la sabbia già posata. La capovolta è una dissolvenza.
Trappole
- Con le sole regole giù e diagonale, un granello sul gradino del vetro (dove la riga sotto è più stretta di due celle) restava appeso per sempre e il download si fermava al 99%: sul gradino scivola di lato verso il centro.
- Girando, la clessidra in orizzontale arrivava con l’angolo sopra Open file: le parole stanno più a destra e la clessidra si rimpicciolisce un poco mentre gira.
- La molla della capovolta, con poco smorzamento, impiegava quasi tre secondi per scendere sotto un quarto di grado e il clic su Open file non faceva niente: la molla si ferma prima, e un clic durante la capovolta la chiude subito.
- L’anteprima della libreria clicca da sola e metteva in pausa il download a metà: un clic senza mano né tastiera non mette in pausa. Il tasto Invio sul pulsante fa un clic con detail 0 come lo script: lo si riconosce dal keydown.
- Coi colori dei granelli troppo diversi la sabbia sembrava un mosaico: toni vicini, più chiari in superficie e più scuri in profondità, si leggono come sabbia.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
