L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante della foglia
L'Unsubscribe di una newsletter, con un rametto e una sola foglia di ginkgo dorata nella punta tonda della pillola. Sotto il puntatore una brezza la muove sul suo picciolo; al clic il vento si alza, il picciolo cede e la foglia cade sotto la pillola planando da una parte all'altra come un pendolo che scende, si rigira e mostra il dorso più chiaro, atterra e si posa con la sua ombra. La pillola dice You're unsubscribed · Come back any season, e dopo un momento sul rametto si apre una foglia nuova.
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 falling leaf button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the falling leaf button: the Unsubscribe of a newsletter, with a twig and one gold ginkgo leaf in the round right
end of the pill. Under the pointer a breeze stirs the leaf on its stalk; a click and the wind takes it: the
stalk lets go and the leaf falls under the pill, gliding from side to side like a pendulum, and lands. A moment
later a new leaf opens on the twig -->
<div class="leaf" data-leaf>
<div class="leaf__unit">
<button class="leaf__btn" type="button" data-btn data-autoclic>
<span class="leaf__fill" aria-hidden="true"></span>
<span class="leaf__faces">
<span class="leaf__face" data-face="rest">
<span class="leaf__word" data-rest-text>Unsubscribe</span>
</span>
<span class="leaf__face leaf__face--two" data-face="busy" aria-hidden="true">
<span class="leaf__small" data-busy-small>The Sunday Letters</span>
<span class="leaf__big" data-busy-text>Letting you go</span>
</span>
<span class="leaf__face leaf__face--two" data-face="done" aria-hidden="true">
<span class="leaf__big" data-done-text>You’re unsubscribed</span>
<span class="leaf__small" data-done-small>Come back any season</span>
</span>
</span>
</button>
<!-- the twig and the leaf, drawn by script.js; the pointer goes through them to the button -->
<svg class="leaf__art" viewBox="-60 -50 120 220" aria-hidden="true" data-art></svg>
</div>
<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.
20 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 della foglia» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola verde muschio scuro alta 60 pixel, con un filo di luce in alto, un'ombra morbida sotto e un riflesso caldo verso destra; a sinistra Unsubscribe in Newsreader color crema. Nella punta tonda di destra, al posto dell'icona, un rametto sottile color corteccia con un germoglio laterale e in cima, appesa al suo picciolo, una foglia di ginkgo dorata: un ventaglio con le venature dritte e fini e l'incavo in mezzo al bordo. Passando sopra la pillola la scritta si fa più piena e più ariosa, il fondo si gonfia con un rimbalzo e una brezza muove la foglia avanti e indietro sul picciolo, a folate. Al clic la pillola dice The Sunday Letters e Letting you go, il vento si alza e la foglia tira il picciolo; dopo un attimo il picciolo cede, il rametto scatta indietro e la foglia cade sotto la pillola: plana da una parte, rallenta, si rialza appena alla fine della planata e torna dall'altra, inclinandosi con ogni planata, e ogni tanto si rigira mostrando il dorso più chiaro. Sotto di lei si raccoglie un'ombra; atterra, si corica, scivola di un soffio e resta lì. La pillola dice You're unsubscribed · Come back any season. Dopo un momento la foglia caduta svanisce e sul rametto se ne apre una nuova: cresce dalla gemma e il ventaglio si apre su una molla. Con la tastiera il fuoco mostra un anello e fa muovere la foglia come la brezza; Invio o Spazio fanno cadere la foglia. Al telefono il tocco scuote la foglia e la fa cadere.
Come funziona
Il rametto e la foglia in un SVG
Un solo SVG sta sopra la punta destra della pillola e scende sotto di lei (pointer-events: none, così il clic arriva al pulsante); la sua origine è il centro della punta. Il rametto è fatto di tre tratti con un gradiente di corteccia. La foglia è un tracciato a ventaglio con l'incavo nel bordo, un gradiente radiale dorato che prende i colori da var(--gold), tredici venature dritte ritagliate dentro il ventaglio e un dorso chiaro che compare solo quando si rigira. Ci sono due foglie: quella appesa e quella che cade.
Sul rametto: un pendolo su un picciolo a molla
La foglia appesa ha un angolo e una velocità, e una molla la riporta al suo angolo di riposo (1,6 oscillazioni al secondo, poco smorzate). La brezza è la somma di tre onde lente con periodi diversi, che non si ripetono mai uguali, moltiplicata per una forza che sale e scende piano: sotto il puntatore 0,45 × BREEZE, al clic 1,5. Quando il picciolo cede, la foglia parte da dov'è, con la velocità che aveva.
La caduta: un pendolo che scende
Una foglia che cade non va dritta: plana da una parte, perde velocità, si rialza appena e torna dall'altra. Qui la foglia è il peso di un pendolo lungo 34 pixel appeso a un punto che scende alla velocità della foglia (SINK) e va un poco col vento: φ'' = −(g / L) sin φ − c φ'. Per non spegnersi e non impazzire, l'energia del pendolo è tenuta vicino a quella di un'ampiezza SWING: se oscilla poco riceve una spinta nel verso in cui va, se oscilla troppo viene frenata. La foglia si inclina con la planata, e un rotolamento lento, più svelto quando plana forte, la fa rigirare.
L'atterraggio e la foglia nuova
Mentre la foglia si avvicina a terra la sua ombra, un'ellisse sfocata, si allarga e si scurisce. Quando la tocca, una timeline di GSAP la corica (ruota e si schiaccia come vista di taglio) e la fa scivolare di cinque pixel. Dopo HOLD secondi la foglia caduta svanisce e sul rametto ne nasce una nuova: scala da zero con un back.out e il ventaglio si apre in larghezza con un elastic.out, come una foglia che si spiega.
Gli stati
Tre facce sovrapposte larghe quanto le parole (a riposo, mentre lascia andare, disiscritto); la pillola si misura una volta sulla più larga. Il pulsante è un button vero con aria-disabled finché la foglia nuova non si è aperta, una zona aria-live che dice Letting you go… e poi You're unsubscribed. Come back any season., e l'aria-label che cambia con lo stato. Il ciclo dura circa 4,6 secondi, meno dei 5,6 di due clic dell'anteprima.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Unsubscribe | La scritta a riposo. |
LIST | script.js | The Sunday Letters | La riga piccola mentre la foglia si stacca: il nome della newsletter. |
LEAVING | script.js | Letting you go | La scritta mentre il vento tira la foglia; la dice anche la zona aria-live. |
DONE | script.js | You’re unsubscribed | La scritta quando la foglia è caduta. |
PARTING | script.js | Come back any season | La riga piccola sotto, il saluto. |
WAIT | script.js | 0.8 | I secondi che il picciolo tiene prima di cedere: in un sito vero, il tempo della risposta del server. |
HOLD | script.js | 3 | I secondi fra la foglia che si stacca e la foglia nuova che si apre. |
SINK | script.js | 72 | Quanto in fretta cade la foglia, in pixel al secondo. |
SWING | script.js | 0.75 | Quanto plana da una parte all'altra, come angolo del pendolo in radianti: 0,2 scende quasi dritta, 1 plana larga. |
BREEZE | script.js | 1 | Quanto la brezza sotto il puntatore muove la foglia: 0 resta ferma. |
Quando usarla
Per l'Unsubscribe di una newsletter, il Cancel subscription o il Pause plan di un abbonamento, il Leave the list di una lista d'attesa, il Delete account detto con garbo: un'uscita che saluta invece di punire. La foglia nuova dice che si può tornare. Il pulsante finge la disiscrizione: in un sito vero il clic chiama il server e il picciolo cede quando risponde.
Sul telefono
La pillola è larga circa 250 pixel e la foglia cade fino a un centinaio di pixel sotto la sua punta destra, planando di una ventina di pixel per parte: a 390 pixel ci sta. Il tocco scuote la foglia e la fa cadere; la foglia resta della sua misura.
Con il movimento ridotto
La foglia non cade e non si muove: quando il picciolo cede svanisce in dissolvenza dal rametto, e dopo un momento la foglia nuova compare in dissolvenza. Le scritte arrivano in dissolvenza, la pillola non si gonfia e la scritta non cambia peso (sotto il mouse il fondo si schiarisce appena).
Trappole
- Un modello aerodinamico vero della lastra che cade (resistenza, portanza e momento calcolati dalla velocità) a seconda dei numeri faceva capriole senza fine o scendeva piatta come un sasso, e la via di mezzo, la foglia che plana, si trovava solo per pochi numeri, che il Playground avrebbe rotto subito. Il pendolo che scende con l'energia tenuta vicino a un livello fa la planata giusta per qualunque valore delle manopole.
- Con un pendolo lungo 22 pixel la foglia scendeva quasi dritta, con planate di una decina di pixel. Ora è lungo 34 e plana di una ventina per parte, con un'oscillazione di circa un secondo e mezzo.
- Alla partenza la foglia saltava dall'angolo che aveva sul rametto a quello della planata. Ora la differenza parte uguale a quella che serve e si spegne in mezzo secondo.
- La foglia larga 23 pixel nella punta della pillola toccava il bordo destro. Ora è un poco più grande ma appesa più a sinistra e meno inclinata, con tutto il ventaglio dentro la curva.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,2 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.
