Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante a mongolfiera
Il pulsante Upload photos che carica le foto in mongolfiera: premuto, dalla pillola esce un cestino di vimini, la stoffa si stende in un mucchio spiegazzato e a ogni fiammata del bruciatore si gonfia un po’ di più, finché le pieghe si distendono, le cuciture si tendono e diventa un pallone a spicchi colorati. Poi decolla, le corde si tendono e il cestino si stacca con uno strattone: l’altezza raggiunta è l’avanzamento del caricamento. In cima ondeggia nel vento e il cestino dondola sotto; premuto di nuovo scende, atterra e si affloscia dentro il pulsante.
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 hot air balloon button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the upload button: pressed, a wicker basket comes up out of the pill, the fabric spills out of it and the
burner fills it into a balloon of coloured gores. Then it climbs: how high it is, is how far the upload has
gone. The balloon, the ropes, the basket and the flame are drawn in the canvas above the pill every frame -->
<div class="balloon" data-balloon data-autoclic>
<canvas class="balloon__sky" aria-hidden="true" data-sky></canvas>
<button class="balloon__btn" type="button" aria-describedby="balloon-hint" data-btn>
<span class="balloon__face" data-face>
<svg class="balloon__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.5 18.5h-1a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.6 8.1a4.25 4.25 0 0 1-.1 8.4h-.9"/><path d="M12 19.5v-8M8.75 14.5 12 11.25l3.25 3.25"/></svg>
<span data-text>Upload photos</span>
</span>
</button>
<p class="balloon__hint" id="balloon-hint"><span data-hint>12 photos selected · up to 20 MB each</span></p>
<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.
27 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 mongolfiera» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola scura con una nuvola e la freccia e la scritta Upload photos, e sotto la riga 12 photos selected · up to 20 MB each. Passandoci sopra col mouse dal bordo alto della pillola spunta l’orlo di un cestino. Premendo, il cestino di vimini sale fuori da una fessura nella pillola, ne esce un mucchio di stoffa colorata spiegazzata e piegata da un lato, e sotto la bocca si accende una fiammella: la scritta diventa Preparing 12 photos. A ogni fiammata la stoffa si riempie di più, le pieghe si distendono, le cuciture smettono di serpeggiare e il mucchio si alza fino a un pallone tondo a spicchi corallo, giallo, crema, verde acqua, indaco e rosa con una fascia chiara in vita, che si gonfia un attimo oltre e si assesta. Poi decolla: la scritta dice Uploading 12 photos con la percentuale, le corde si tendono, il cestino si stacca dalla pillola e sale col pallone; a ogni salto del caricamento il pallone sale di più, e quando la fiamma soffia la stoffa vicino alla bocca si accende d’arancio da dentro. Al cento per cento il pallone è in cima, la scritta diventa Uploaded con una spunta verde, e il pallone ondeggia lento nel vento girando piano su se stesso; ogni tanto una folata lo spinge e il cestino dondola sotto, in ritardo. Premendo di nuovo scende, il cestino tocca la pillola, la fiamma si spegne, la stoffa si sgonfia in un mucchio, rientra nel cestino e il cestino nella pillola. Premendo durante il caricamento lo annulla allo stesso modo.
Come funziona
Il pallone come superficie di rotazione
La stoffa è una griglia di 26 righe dalla cima alla bocca e quattro colonne per ogni spicchio, disegnata in un canvas a ogni fotogramma. Ogni punto viene da un profilo (raggio e altezza a una certa riga) fatto girare intorno all’asse e voltato appena di lato; ogni colonna è una striscia riempita con un gradiente lungo la sua lunghezza, coi colori calcolati riga per riga dalla normale di ogni quadrilatero (luce avvolta, un riflesso morbido, il bordo che si scurisce). Le colonne si disegnano dalla più lontana alla più vicina, e sopra passano le cuciture.
Dal floscio al pieno, su una molla
Il profilo pieno è una goccia: una mezza sfera in alto e un cono che si stringe fino alla bocca. Quello floscio è un mucchio basso e largo che pende di lato, con le pieghe: qualche onda di seni che corre intorno e lungo la stoffa e si muove piano. Un numero solo, il gonfiaggio, li mescola: va verso 1 su una molla (SPRING), e ogni fiammata gli dà una spinta, così il pallone si riempie a colpi e alla fine va un attimo oltre e si assesta. Più è pieno, più le pieghe si spengono e ogni spicchio si gonfia un po’ fra le sue due cuciture.
Il cestino, un pendolo doppio in verlet
Il cestino sono due punti, il bordo e il fondo, mossi in verlet a passi di 1/240 di secondo: le corde lo tengono a non più di ROPE pixel dalla bocca (si allentano quando la bocca è più vicina e si disegnano allora con una pancia), il cestino è rigido e una cerniera morbida lo tiene allineato alle corde spingendo i due punti in versi opposti. A terra, mentre il pallone si gonfia o dopo l’atterraggio, il cestino sta dritto sotto la bocca; in volo ogni spostamento del pallone, la salita e le folate, lo fa dondolare in ritardo.
Il vento e la salita
L’altezza è una molla verso la percentuale del caricamento finto (una timeline a strappi), con l’accelerazione limitata a meno di quella di gravità: se il pallone scendesse più in fretta di una caduta il cestino resterebbe a mezz’aria. In volo il pallone segue una deriva lenta su una seconda molla e ogni due o tre secondi una folata gli dà un colpo, che lo inclina appena e fa dondolare il cestino.
La fiamma
Il bruciatore sta fra le corde e manda particelle verso la bocca, poche e continue per la fiammella, a mazzi a ogni fiammata. Le particelle sono una sfumatura radiale disegnata una volta, sommate in modo additivo su un canvas trasparente a parte e poi posate sul disegno: sul bianco l’additivo puro non si vedrebbe. La stessa fiammata accende d’arancio la stoffa vicino alla bocca e il fondo della bocca.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHOTOS | script.js | 12 | Quante foto manda il caricamento finto. |
INFLATE | script.js | 1.6 | I secondi che il bruciatore impiega a gonfiare il pallone. |
UPLOAD | script.js | 3.2 | I secondi del caricamento finto: la salita. |
GORES | script.js | 12 | Gli spicchi di stoffa intorno al pallone. |
SPRING | script.js | [90, 9] | La molla della stoffa: rigidità e smorzamento (più basso, più rimbalza quando è pieno). |
WIND | script.js | 1 | Quanto il vento fa ondeggiare il pallone in cima (0 = aria ferma). |
ROPE | script.js | 34 | La lunghezza delle corde dalla bocca del pallone al cestino, in pixel. |
Quando usarla
Per l’azione che manda qualcosa da qualche parte e ci mette un po’: caricare foto, pubblicare un album, spedire un pacco di file, inviare un progetto. Sta bene in un’app di foto o di viaggi, in un servizio di stampa, in una pagina dove l’attesa è parte del piacere; il pulsante resta piccolo, il pallone usa lo spazio sopra.
Sul telefono
Il cielo si stringe con lo schermo (a 390 pixel è largo 358) e il pallone si scala con lui; la pillola resta di 268 pixel e niente sfora. Il tocco fa quello che fa il clic e la riga sotto dice Tap; non c’è il cestino che spunta al passaggio, perché il dito non passa sopra.
Con il movimento ridotto
Il pallone non sale e non si gonfia: premendo compare in dissolvenza già pieno, in cima, col cestino fermo e dritto e una fiammella ferma; la percentuale corre nella pillola e alla fine dice Uploaded. Premendo di nuovo sparisce in dissolvenza. Niente vento, niente rotazione, e le scritte cambiano senza scivolare.
Trappole
- Disegnata a quadrilateri pieni, la stoffa mostrava una griglia di righe chiare fra l’uno e l’altro e sembrava sfaccettata: ora ogni colonna è una sola striscia con un gradiente lungo la sua lunghezza, e restano solo le cuciture.
- Sul bianco le particelle sommate in modo additivo diventano bianche e la fiamma spariva: si sommano su un canvas trasparente a parte, che poi si posa sul disegno normalmente.
- Il cestino che usciva dalla pillola con un’entrata elastica veniva lanciato in aria dal pavimento che saliva e restava sopra la bocca: il pavimento ora sale senza rimbalzo, e la cerniera fra corde e cestino agisce solo quando il cestino è sotto la bocca.
- La cerniera che spingeva solo il fondo del cestino aggiungeva energia a ogni passo e il cestino finiva per girare orizzontale: ora spinge il bordo e il fondo in versi opposti.
- Scendendo, la molla dell’altezza accelerava più della gravità: le corde si allentavano, il cestino galleggiava e poi strattonava. L’accelerazione è limitata sotto la gravità.
- All’atterraggio il cestino toccava terra di sbieco e si ribaltava come un pendolo rovesciato: a terra smette di essere un pendolo e si raddrizza sotto la bocca.
- In Chrome un canvas svuotato solo con clearRect, e poi lasciato fermo, a volte continuava a mostrare l’ultimo disegno: quando non c’è più niente da disegnare il canvas si svuota riassegnandogli la larghezza.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 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.
