Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il germoglio della sincronizzazione
La sincronizzazione delle note di un’app come una piantina che cresce in un vasetto di terracotta: dal seme esce il germoglio piegato a uncino, il fusto si allunga verso la luce e si ramifica, ogni foglia si srotola da una piega e tutto ondeggia su molle. La pianta è la barra di avanzamento; alla fine sul bocciolo si apre un fiore. Se cade la connessione la pianta appassisce un poco finché Retry non la fa raddrizzare, e ogni volta cresce una pianta diversa da un seme nuovo.
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 sync sprout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sync of a notes app, shown as a seedling in a small clay pot. Pressed, the seed in the soil shivers while
the app looks for changes, then it splits and a shoot comes up in a hook, opens its two seed leaves and
climbs: the stem branches, every leaf unrolls from a fold, the whole plant sways on springs. The plant is the
progress. When every note is in, the bud on top opens into a flower; if the connection drops the plant wilts
until Retry. Every sync grows a slightly different plant from a new seed. The plant and the pot are drawn by
script.js on the canvas; the words and the button are HTML -->
<section class="sprout" aria-labelledby="sprout-title" data-sprout>
<div class="sprout__scene" role="progressbar" aria-labelledby="sprout-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not syncing" data-scene>
<canvas class="sprout__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="sprout__foot">
<div class="sprout__words">
<h2 class="sprout__title" id="sprout-title"><span class="sprout__swap" data-title>Notes</span></h2>
<p class="sprout__meta"><span class="sprout__swap" data-meta>Last synced 2 hours ago</span></p>
</div>
<button class="sprout__btn" type="button" data-action data-autoclic><span class="sprout__label" data-label>Sync now</span></button>
</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.
38 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 germoglio della sincronizzazione» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro, un vasetto di terracotta lucido di luce a sinistra, con la terra scura e un seme mezzo sepolto; sotto, Notes e Last synced 2 hours ago, e a destra il pulsante verde scurissimo Sync now. Premuto, il seme trema mentre l’app cerca le modifiche (Looking for changes…); poi arrivano le note e la pianta cresce con loro. Il germoglio spunta piegato a uncino con il guscio del seme ancora in punta, si raddrizza con un piccolo rimbalzo, apre le due foglie tonde del seme e il guscio cade sulla terra, rimbalzando. Il fusto sale nodo dopo nodo, si inclina verso la luce e fa un piccolo zig zag lontano da ogni foglia; dai nodi partono dei rami laterali; ogni foglia nasce chiusa come un libro e arrotolata in punta, si allarga, si apre e passa dal verde chiaro della foglia nuova al verde pieno, con la nervatura centrale e quelle laterali. Il fusto si ispessisce mentre la pianta cresce, e ogni pezzo ondeggia appena alla brezza; a ogni gruppo di note in arrivo le parti che stanno crescendo hanno un piccolo sussulto. Sotto, la riga dice la percentuale e quante note sono arrivate (37% · 312 of 846); il pulsante diventa Pause, chiaro e col bordo. Verso la fine in cima si forma un bocciolo; quando arrivano tutte le note il fusto fa un cenno, il bocciolo si apre in un fiore giallo con i petali che si allargano uno dopo l’altro con un elastico, e il titolo diventa All notes synced con una spunta che si disegna. Sync again chiude il fiore, la pianta torna nella terra, un seme nuovo cade nel vaso con dei rimbalzi e la sincronizzazione riparte: la pianta che cresce è un’altra. Una volta su due, nella demo, a metà strada cade la connessione: la pianta smette di crescere e appassisce un poco, il fusto si piega, le foglie pendono, si richiudono un po’ e ingrigiscono, il titolo in rosso dice Connection lost e il pulsante diventa Retry. Retry riporta la connessione: la pianta si raddrizza di colpo con un rimbalzo e riprende a crescere da dove si era fermata. Il puntatore che passa fra le foglie le smuove, e un tocco le spinge via dal dito.
Come funziona
Una pianta da un numero
Il seme è un numero che alimenta un generatore pseudocasuale (mulberry32): da lì nasce lo scheletro della pianta, una volta sola per sincronizzazione. Il fusto è una fila di segmenti da nodo a nodo; i primi tre sono l’ipocotile che spunta a uncino, poi ogni nodo ha una foglia, alternata a destra e a sinistra, e con una certa probabilità un ramo laterale di due o tre segmenti con le sue foglie. La piega di ogni segmento corregge un poco l’angolo verso la finestra (il fototropismo) e aggiunge un piccolo zig zag lontano dalla foglia. Ogni pezzo sa quando comincia a crescere e quanto ci mette, in unità di avanzamento: tutto finisce prima del 95%, e l’ultimo tratto va nel bocciolo.
Crescere col parametro
A ogni fotogramma lo scheletro si stende per l’avanzamento mostrato, nodo per nodo dalla terra in su: ogni segmento è lungo quanto la sua crescita, l’angolo si somma a quello del segmento di sotto, i rami partono dal loro nodo. Lo spessore si calcola dalla punta: sottile in cima, più largo di 0,048 pixel per ogni pixel di fusto che c’è sopra, con un tetto che cresce con la pianta. Prima di partire la pianta viene stesa da grande e scalata in modo uniforme perché fiore e foglie stiano nel riquadro, qualunque seme esca. L’avanzamento segue i dati su una molla con lo smorzamento critico, che non torna mai indietro.
Fusti a nastro e foglie a libro
I nodi di un ramo passano per una curva Catmull-Rom; lungo la curva un nastro che si assottiglia (i bordi a destra e a sinistra della normale, la punta arrotondata) fa il fusto, con sopra due nastri più stretti spostati verso la luce e verso l’ombra. Una foglia è una nervatura centrale che si incurva (verso il basso col peso, verso il fusto finché è giovane) e due metà che si chiudono come le pagine di un libro: la larghezza vista è quella vera per il coseno dell’angolo di piega. La metà rivolta in alto prende la luce, l’altra resta in ombra, e sopra si disegnano le nervature laterali che curvano verso il margine, il bordo più scuro e un’ombra morbida.
Tutto su molle
Ogni segmento e ogni foglia ha un angolo in più su una molla smorzata (al 26% dello smorzamento critico, calcolata a passi di 1/240 di secondo): la brezza è un bersaglio che oscilla con due seni, l’appassimento è un bersaglio che piega i segmenti verso il lato della luce e le foglie verso il basso, e il puntatore dà a ogni pezzo vicino la rotazione della sua spinta (il prodotto vettoriale fra il pezzo e la velocità del puntatore). Quando il bersaglio dell’appassimento torna a zero in fretta, le molle superano la posizione e la pianta si raddrizza con un rimbalzo.
Il seme e il fiore
Il guscio del seme resta sulla punta delle foglie del seme finché non si aprono, poi cade con la sua gravità e rimbalza sulla terra. Il fiore è disegnato in tre dimensioni semplici: un asse inclinato verso chi guarda, ogni petalo una direzione che si apre dall’asse verso fuori di un angolo che va da chiuso ad aperto con un elastico sfalsato petalo per petalo; i petali si proiettano sul piano, si ordinano dal più lontano e prendono la luce dalla loro normale. Sync again riavvolge l’avanzamento a zero e fa cadere un seme nuovo con un rimbalzo.
Per chi non vede e per chi non vuole movimento
Il disegno è un role=progressbar con aria-valuenow e aria-valuetext in note, la sezione ha aria-busy mentre lavora e una riga aria-live dice quando la sincronizzazione parte, si ferma, perde la connessione e finisce. Il pulsante cambia parola (Sync now, Pause, Resume, Retry, Sync again) e la pillola prende la larghezza nuova con un piccolo rimbalzo; un clic da script, quello dell’anteprima della libreria, non mette mai in pausa. Quando niente si muove il canvas non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NOTES | script.js | 846 | Quante note sincronizza l’app. |
SECONDS | script.js | 5.5 | Quanto dura una sincronizzazione nella demo, in secondi (una vera segue le sue note). |
FAIL_EVERY | script.js | 2 | Nella demo, una sincronizzazione su quante perde la connessione (0 mai). |
FAIL_AT | script.js | 0.56 | Fin dove arriva la sincronizzazione che perde la connessione, da 0 a 1. |
SEED | script.js | 11 | Il seme della prima pianta; ogni sincronizzazione dopo cresce da un seme nuovo. |
NODES | script.js | 8 | Quanti nodi fa il fusto principale. |
BRANCHING | script.js | 0.5 | Quanto è probabile che un nodo faccia un ramo laterale, da 0 a 1. |
LIGHT | script.js | 0.6 | Quanto si piega la pianta verso la luce, da 0 a 1. |
PETALS | script.js | 5 | I petali del fiore. |
SWAY | script.js | 1 | Quanto la muove la brezza: 0 ferma, 1 poco, 2 tanto. |
DROOP | script.js | 1 | Quanto appassisce quando cade la connessione: 0 per niente, 1,5 tanto. |
FOLLOW | script.js | 0.4 | Quanto ci mette la pianta a raggiungere le note arrivate, in secondi. |
Quando usarla
Per un’attesa di qualche secondo che ha un esito, in un’app dal tono gentile: sincronizzare delle note, un diario, un backup, l’importazione di una libreria. La pianta dice «sta crescendo, va tutto bene» meglio di una barra, e l’appassimento si capisce senza leggere; per un caricamento di un secondo o per un’app tecnica è meglio qualcosa di più asciutto.
Sul telefono
Il componente prende la larghezza dello schermo meno 32 pixel (358 a 390) e resta alto 290; la pianta viene scalata per stare nel riquadro e il canvas disegna alla densità vera dello schermo, fino a due volte. Col dito, un tocco spinge via le foglie vicine e un trascinamento di lato le smuove; lo scorrimento in verticale resta alla pagina. Il pulsante si schiaccia e rimbalza, e la scritta si allarga sull’asse della larghezza solo sotto il mouse.
Con il movimento ridotto
Niente brezza, molle, tremiti, sussulti né rimbalzi: la pianta cresce lo stesso, perché è lei che dice a che punto si è, ma ogni pezzo sta già al suo posto; il guscio è subito sulla terra, l’appassimento e il raddrizzarsi sono immediati, il fiore si apre di colpo, e Sync again passa alla pianta nuova con una dissolvenza. Le parole nuove arrivano in dissolvenza e la spunta non si disegna.
Trappole
- La prima pianta era un bastoncino stretto in mezzo a un riquadro largo: la scala che la fa stare nel riquadro dipendeva solo dall’altezza, e un fusto lungo con foglie piccole la schiacciava. Fusto più corto, foglie e rami più grandi e la scala calcolata su altezza e larghezza insieme.
- Il guscio del seme, cadendo, finiva sul bordo del vaso e sembrava appoggiato sulla terracotta: il seme è largo dieci pixel e la terra vista dall’alto è un’ellisse alta pochi pixel. Ora rimbalza solo nella parte di dietro della terra, e quando si ferma si gira di piatto con un piccolo back.out, invece di restare in piedi.
- Con la connessione caduta l’appassimento quasi non si vedeva: le molle delle foglie erano tirate verso il basso di 0,75 radianti, e la pianta sembrava solo ferma. Le foglie ora pendono di più, si richiudono un poco, si incurvano col peso e ingrigiscono, e il fusto si piega verso la luce.
- Il fiore, che è il premio della fine, era largo una ventina di pixel e si perdeva in cima alla pianta: i petali ora sono lunghi quasi il doppio, con un cuore più grande.
- Con l’appassimento al doppio la pianta si accartocciava a uncino e sembrava morta, non stanca: nel Playground il cursore si ferma a 1,5.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 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.
