Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il veliero nella bottiglia
L’installazione di un’app come un veliero dentro una bottiglia di vetro distesa: lo scafo è già dentro, con gli alberi abbattuti sul ponte, e mentre i file vengono copiati un filo che esce dal collo li tira su uno dopo l’altro, ognuno su una cerniera a molla. Poi le vele si srotolano e si gonfiano di vento, le bandierine salgono in cima, il filo viene tagliato e il tappo di sughero entra nel collo con un colpo: installata. Se va storta, l’albero che si stava alzando ricade sul ponte; Retry lo rialza.
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, viewport-fit=cover">
<title>The ship in a bottle installer</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">
<!-- the ship in a bottle: the install of an app shown as a schooner inside a glass bottle lying on a wooden stand.
The hull is already in, sitting in a sea of blue resin, with its three masts laid flat on the deck. As the files
are copied a thread that runs out of the bottle's neck to a little winch pulls the masts up one after another,
each on a sprung hinge; then the sails unroll and fill with wind and the pennants stream out. At the end the
thread is cut and the cork hops into the neck. Everything is painted by script.js on the canvas -->
<section class="ship" aria-label="App installer" data-veliero>
<div class="ship__scene" role="progressbar" aria-label="Install progress" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to install" data-scene>
<canvas class="ship__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="ship__foot">
<div class="ship__words" aria-hidden="true">
<p class="ship__title"><span class="ship__swap" data-title>Harbor 3.0</span></p>
<p class="ship__meta"><span class="ship__swap" data-meta>Ready to install · 84.2 MB</span></p>
</div>
<div class="ship__buttons">
<button class="pill is-quiet" type="button" hidden data-again><span class="pill__label">Reinstall</span></button>
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Install</span></button>
</div>
</div>
<p class="sr" role="status" aria-live="polite" data-live></p>
</section>
</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.
47 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 veliero nella bottiglia» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da sola al centro, una bottiglia di vetro verdino distesa su un supporto di legno con due culle; dentro, una goletta a tre alberi su un mare di resina blu scolpito con un’onda, la schiuma bianca a prua e a poppa, gli alberi abbattuti sul ponte con i picchi e i bomi ripiegati lungo di loro. Dal collo esce un filo che scende a un piccolo argano con la manovella, e accanto, sulla tavola, è appoggiato il tappo di sughero. Sotto la bottiglia Harbor 3.0, Ready to install · 84.2 MB e la pillola Install. Puntando la pillola il filo si tende e gli alberi si sollevano di poco dal ponte. Premuta, l’argano comincia a girare e il filo tira su il trinchetto, poi l’albero maestro, poi la mezzana: ognuno ruota sulla sua cerniera, il bomo e il picco si aprono a metà salita, e arrivato dritto l’albero oscilla qualche volta sulla molla prima di fermarsi. Intanto il mare si muove appena e la nave beccheggia. Poi il fiocco si srotola dal suo strallo e le tre vele scendono dai picchi come tende, ognuna con il rotolo che si assottiglia, e appena sono distese il vento le gonfia: la luce sulla tela mostra la pancia della vela. In fondo le bandierine rosse salgono in cima agli alberi e sventolano. Sotto, Installing Harbor 3.0 e una riga che dice cosa succede (Copying files, Configuring, Finishing up) con la percentuale; la pillola diventa Cancel. Finito, il filo viene tagliato e cade, il tappo salta dalla tavola facendo una capriola e entra nel collo con un colpo: il tappo si schiaccia, la bottiglia ha un sussulto, gli alberi ondeggiano, le bandierine schioccano e un riflesso attraversa il vetro. Harbor 3.0 installed, con Open e Reinstall. Reinstall toglie il tappo, riannoda il filo, arrotola le vele, abbassa gli alberi e ricomincia. Una volta su due, nella demo, a metà strada l’installazione si ferma: il filo scivola, la mezzana che stava salendo ricade sul ponte con un rimbalzo, l’argano torna indietro e il suo filo resta lento; in rosso Installation failed, sotto Couldn’t write to disk, e la pillola diventa Retry, che ritende il filo, rialza l’albero e riprende da dove si era fermata. Cancel, durante l’installazione, arrotola le vele e rimette giù gli alberi.
Come funziona
Tutto segue un numero solo
Arrivano pezzi di file di ogni grandezza, a volte dopo una pausa, e una molla con lo smorzamento critico porta la parte mostrata verso quella arrivata senza mai tornare indietro. Da quel numero viene tutto: ogni albero ha il suo tratto (il trinchetto fra il 3 e il 23%, il maestro fra il 19 e il 39, la mezzana fra il 35 e il 55), ogni vela il suo per srotolarsi e uno per gonfiarsi, le bandierine l’ultimo. Così Cancel e Reinstall non hanno un’animazione loro: riportano il numero a zero e la nave si rimette a riposo da sola, vele arrotolate e alberi giù.
Gli alberi sono su una cerniera a molla
Ogni albero è un angolo con la sua velocità: il filo lo tira verso l’angolo del suo tratto con una molla poco smorzata (rigidezza 95, smorzamento da SPRING), e quando il tratto finisce la cerniera scatta con un colpetto di velocità, così l’albero arriva dritto e oscilla qualche volta. Il bomo e il picco sono legati all’albero e si aprono con la salita: ripiegati lungo l’albero finché è basso, a squadra quando è su. Quando il filo scivola l’albero non ha più molla: cade sotto il suo peso (un’accelerazione proporzionale al seno dell’angolo) e rimbalza sul ponte perdendo due terzi della velocità. L’argano gira di quanto sono alti gli alberi, quindi torna indietro da solo quando uno cade.
Le vele sono tela a molle
Ogni vela è una griglia di 9 per 7 punti in tre dimensioni, uniti da bastoncini lungo i lati e in diagonale, integrata con Verlet a passi di 1/120 di secondo e otto giri di vincoli. Sono fermi i punti lungo l’albero, lungo il picco e lungo il bordo arrotolato, che scende verso il bomo man mano che la vela si srotola. Il vento spinge la tela fuori dal suo piano, a raffiche che corrono lungo la vela, e i bastoncini orizzontali sono più lunghi della vela piatta fino al 10%: così la tela non può che fare la pancia, e la balumina libera trema. Il fiocco è la stessa cosa, un triangolo che si srotola dal suo strallo verso l’angolo di scotta.
La luce dice la forma
La vela si disegna quadrilatero per quadrilatero, in una proiezione appena obliqua che sposta i punti col loro rilievo. Per ogni punto la normale viene dai vicini a destra e a sinistra, sopra e sotto; la luce di un quadrilatero è la media dei suoi quattro angoli, così la tela sembra una superficie sola e non un mosaico. Il colore va dall’ombra della tela al bianco caldo della vela, poi sopra si tirano le cuciture dei teli e la ralinga lungo il bordo.
Il vetro che piega
Tutto quello che c’è dentro la bottiglia si dipinge su un secondo canvas e si copia nella bottiglia una riga di pixel alla volta: la riga a distanza u dall’asse prende la riga u + (arcsen(0,93 u) ÷ arcsen 0,93 − u) × 0,85, la legge di un cilindro di vetro. Il veliero è ingrandito al centro e schiacciato verso il vetro, come nelle bottiglie vere. Sopra, il vetro a strati: il suo spessore verde (fra il contorno e quello interno, con evenodd), il fondo spesso, il riflesso lungo della finestra, la spalla, il collo e la bocca, e sulla tavola l’ombra con la luce che la bottiglia raccoglie in una striscia.
Il tappo, e per chi non vede
Alla fine il filo si taglia, il tappo segue una curva di Bézier dalla tavola alla bocca facendo un giro intero, entra con power3.in e si schiaccia con elastic.out; nello stesso istante la bottiglia ha un sussulto, ogni albero riceve un colpo di velocità e un riflesso attraversa il vetro. La scena è un role=progressbar con aria-valuenow e una aria-valuetext che dice la fase, il componente ha aria-busy mentre lavora e una riga aria-live dice quando parte, si ferma, finisce. Un clic da script, quello dell’anteprima della libreria, non annulla e non apre: dopo il risultato reinstalla.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 7 | Quanto dura l’installazione della demo, in secondi (una vera segue i suoi file). |
SIZE | script.js | 84.2 | I megabyte dell’app da installare. |
FAIL_EVERY | script.js | 2 | Nella demo, un’installazione su quante va storta (0 mai). |
FAIL_AT | script.js | 0.5 | Fin dove arriva l’installazione che va storta, da 0 a 1: l’albero che si stava alzando ricade. |
SPRING | script.js | 1 | Quanto oscilla un albero sulla sua cerniera quando arriva dritto: 0 niente, 1 molto. |
WIND | script.js | 1 | Quanto vento gonfia le vele: 0 niente, 1 una brezza tesa. |
WAVE | script.js | 1 | L’onda del mare di resina: 0 piatta, 1 mossa. |
REFRACTION | script.js | 1 | Quanto il vetro curvo ingrandisce il veliero al centro e lo schiaccia verso i bordi: 0 niente. |
LABELS | script.js | { busy: 'Cancel', retry: 'Retry', done: 'Open', opening: 'Opening…' } | Le scritte del pulsante mentre installa, dopo un errore e alla fine (a riposo è quella in index.html). |
WORDS | script.js | { copy: 'Copying files', config: 'Configuring', finish: 'Finishing up', done: 'installed', fail: 'Installation failed', why: 'Couldn’t write to disk', canceled: 'Installation canceled' } | Le parole sotto la bottiglia: le tre fasi, la fine, l’errore e il suo motivo, l’annullamento (a riposo sono quelle in index.html). |
Quando usarla
Per un’attesa di qualche secondo che finisce con qualcosa di pronto: l’installazione di un’app o di un’estensione, un aggiornamento, la preparazione di un progetto, un’esportazione che si «imbottiglia» in un pacchetto. La nave che si arma pezzo per pezzo fa vedere a che punto si è senza leggere la percentuale, e il tappo che entra è un «fatto» che si sente. Per un caricamento di un secondo o per una lista di file è troppo: meglio una barra semplice.
Sul telefono
Il disegno è largo 380 unità e alto 200 e si adatta alla larghezza: a 390 pixel il componente è largo 358 e alto circa 240, senza niente che sfori. Il canvas dipinge alla densità vera dello schermo, fino a due volte, e la rifrazione riga per riga segue i pixel veri. Le pillole sono alte 38; col dito si schiacciano e rimbalzano, e toccare Install tende il filo come il puntatore sopra. Le animazioni sono le stesse del computer.
Con il movimento ridotto
Niente molle, raffiche, onde né capriole: ogni albero passa da abbattuto a dritto in dissolvenza quando arriva a metà del suo tratto, ogni vela compare già gonfia con una pancia ferma, le bandierine compaiono senza sventolare, il mare resta fermo e il tappo sparisce dalla tavola e ricompare nel collo. Se l’installazione si ferma, l’albero torna giù in dissolvenza. Le parole cambiano in dissolvenza, e la nave si arma lo stesso un pezzo alla volta, perché è lei che dice a che punto si è.
Trappole
- Lo spessore verde del vetro copriva tutta la bottiglia: le due forme, quella esterna e quella interna, cominciavano ognuna con beginPath, quindi la seconda cancellava la prima e il riempimento evenodd riempiva tutto l’interno. Ora la forma interna si aggiunge allo stesso tracciato.
- Al colpo del tappo le vele sparivano per un attimo: la spinta fa piegare gli alberi indietro di qualche grado, sotto la soglia di «albero dritto» che accendeva la tela, e la tela si spegneva e ripartiva piatta. La soglia ora è molto più bassa del dondolio.
- Le vele sembravano carta stropicciata: tutti i bastoncini erano più lunghi della vela piatta, anche quelli verticali, e la gravità e la spinta in avanti tiravano la tela nel suo piano, quindi si increspava invece di gonfiarsi. Ora si allungano solo quelli orizzontali (e un po’ le diagonali), la spinta è solo fuori dal piano e la luce è la media dei quattro angoli di ogni quadrilatero.
- Il filo fra il bompresso e il collo era nero: si disegnava dopo il restore della nave, che rimetteva il colore di prima. Ora il colore si dà di nuovo dopo.
- Il pennone ripiegato puntava giù attraverso lo scafo quando l’albero era abbattuto (la direzione «verso poppa» di un albero sdraiato è verso il basso): ora bomo e picco si aprono con la salita e da abbattuti stanno lungo l’albero.
- Il tappo entrava solo per la bocca e sembrava appoggiato fuori: ora entra per due terzi, e sulla parte dentro il collo si ridisegnano il verde del vetro e il suo riflesso, così si vede attraverso il vetro.
- La scritta «installed» arrivava solo alla fine del riflesso, due secondi dopo il colpo: ora cambia nell’istante in cui il tappo batte.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 20 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
