Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della mimosa pudica
Il pulsante Pause notifications di un'app di chat per il lavoro, con dentro una foglia viva di mimosa pudica, la pianta che chiude le foglioline quando la tocchi. Il puntatore che la sfiora fa chiudere le coppie di foglioline intorno a sé, in un'onda che corre lungo la foglia e si spegne per strada. Al clic il segnale percorre tutta la foglia: ogni coppia si chiude a turno, la foglia si affloscia, sulla pillola scende la sera e le notifiche sono in pausa. Poi la foglia si risveglia, una coppia dopo l'altra.
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 sensitive plant button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rosario@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sensitive plant button: the Pause notifications button of a team chat app, with a living leaf of mimosa
pudica inside, the plant that folds its leaflets shut when it is touched. Its two pinnae wrap round the words;
the pointer brushing them makes the leaflets fold away in a ripple, and a click sends the signal down the
whole leaf: every pair folds shut, the leaf droops, and the notifications are paused -->
<div class="mimosa" data-mimosa>
<button class="mimosa__btn" type="button" data-btn data-autoclic>
<canvas class="mimosa__shade" aria-hidden="true" data-shade></canvas>
<canvas class="mimosa__leaf" aria-hidden="true" data-leaf></canvas>
<canvas class="mimosa__leaf mimosa__ghost" aria-hidden="true" data-ghost></canvas>
<span class="mimosa__dusk" aria-hidden="true" data-dusk></span>
<span class="mimosa__label" data-label>
<span class="mimosa__words" data-words>Pause notifications</span>
</span>
</button>
<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.
24 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 mimosa pudica» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola alta 60 pixel, color salvia chiaro, con la luce che arriva dall'alto a sinistra. Da sinistra entra il picciolo rossiccio di una foglia di mimosa pudica, che si divide in due pinne: due piume di foglioline strette e lunghe, a coppie, quasi una contro l'altra, che si aprono a forcella e poi corrono lungo la pillola, una sopra e una sotto la scritta Pause notifications. Ogni fogliolina ha la sua venatura e la sua ombra morbida sulla pillola, e nessuna è dello stesso verde dell'altra. Col mouse sopra la pillola si alza appena; il puntatore che passa sulla foglia la tocca: le coppie sotto di lui si chiudono, si alzano e si piegano verso la punta della piuma, la compagna contro la compagna, e un'onda di chiusura corre avanti e indietro lungo la piuma e si spegne dopo qualche coppia; passando in fretta l'onda arriva più lontano, e una carezza veloce vicino all'attacco fa afflosciare tutta la foglia. Dopo un secondo le foglioline si riaprono, piano, inclinate in avanti come quelle vere. Premendo, la pillola si abbassa e le coppie sotto il dito si chiudono subito. Al clic la scritta diventa Pausing e il segnale parte dal punto toccato: corre lungo la piuma nei due sensi, passa per l'attacco nell'altra piuma, e ogni coppia si chiude a turno, finché le due piume sono due cordoncini intrecciati color verde oliva, accesi dalla luce che passa attraverso le foglioline. Poi la foglia si affloscia con un piccolo rimbalzo, l'ombra le si stringe sotto, e da destra sulla pillola scende una luce fredda di sera. La scritta diventa Paused for 1 hour, un po' più leggera. Dopo qualche secondo, o con un altro clic, la sera se ne va, la foglia si rialza e le coppie si riaprono una dopo l'altra dall'attacco verso le punte, e la scritta torna Pause notifications. Anche all'arrivo la foglia è chiusa e si risveglia. Con la tastiera il fuoco mostra un anello verde e un respiro corre lungo la foglia; Invio o Spazio mettono in pausa, e il segnale parte dal picciolo. Al telefono il dito che scorre sulla foglia la tocca come il mouse, e il tocco mette in pausa da dove ha toccato.
Come funziona
La foglia
Il picciolo entra da sinistra e all'attacco si divide in due pinne. La nervatura di ogni pinna parte a 27 gradi e si piega con una curva di secondo grado fino a correre lungo la pillola, poi si arriccia di un pixel e mezzo verso la punta. Le coppie di foglioline stanno ogni SPACING pixel a partire da 9 pixel dall'attacco: 138 coppie in una pillola larga 340. Le foglioline sono un po' più piccole vicino all'attacco e molto più piccole in punta. La nervatura passa dove le foglioline interne lasciano libera la fascia della scritta, e la scritta va nel tratto più lungo in cui le due pinne, con le foglioline della misura vera di quel punto, la lasciano passare.
Il segnale
Un tocco è un segnale con una sua energia, in un punto della foglia. La distanza si misura lungo la foglia: sulla stessa pinna lungo la nervatura, fra le due pinne giù da una e su per l'altra attraverso l'attacco. Ogni coppia raggiunta con energia − distanza / 150 ≥ 0,1 si chiude nell'istante in cui il segnale ci arriva, a SPEED pixel al secondo; se all'attacco l'energia è ancora 0,9, tutta la foglia si affloscia. Una coppia chiusa non si può richiudere finché non si è riaperta oltre metà. Il puntatore dà un'energia che cresce con la sua velocità fino a 900 pixel al secondo, 0,1 + REACH · (0,07 + 0,8 · v / 900); la pressione 0,42; il clic 99, che arriva dappertutto e richiude anche le coppie che si stanno riaprendo.
Ogni fogliolina in 3D
Una fogliolina è una lama che gira intorno alla nervatura di un angolo che va da 0 a 92 gradi, mentre il suo asse si piega verso la punta della pinna da 70-78 gradi (aperta) a 42. Ne vengono tre vettori: lungo la fogliolina, di traverso verso la punta, e la normale della faccia di sopra. La vista è dall'alto ma un poco da davanti (un punto alto h sale sullo schermo di 0,34 · h), e la fogliolina si disegna sul canvas col suo setTransform, un'affine fatta da due di quei vettori. La sua ombra è la stessa forma proiettata sulla pillola lungo la direzione della lampada, su un secondo canvas sfocato dal CSS.
Luce e colore
Si guarda quale faccia vede l'occhio e quanta luce le arriva dalla lampada in alto a sinistra: la faccia di sopra è verde pieno, quella di sotto più chiara. Una faccia vista dalla parte opposta alla lampada è illuminata da dietro, verde giallo, come una foglia sottile in controluce: è quello che fa brillare le piume chiuse. Le sfumature sono 40 livelli di luce per ognuno dei tre colori, fatte una volta sola come gradienti nelle unità della fogliolina, così il gradiente la segue attraverso la sua trasformazione. Ogni fogliolina ha un piccolo scarto di tinta suo, fisso.
Le molle
Ogni fogliolina segue il suo bersaglio su una molla: per chiudersi una molla rapida con un poco di rimbalzo (smorzamento 0,58, pulsazione 2,5 / SNAP), per aprirsi una lenta senza rimbalzo (4,6 / WAKE). La molla si sceglie dal bersaglio, non dalla posizione, così il rimbalzo della chiusura torna indietro svelto. Il conto si fa sul ticker di GSAP in passi di 1/240 di secondo, col fotogramma limitato a 1/30. Anche la foglia intera cade su una molla col rimbalzo e si rialza su una lenta; afflosciata, l'altezza da cui proietta l'ombra scende e, vista dall'alto, si accorcia un poco verso il picciolo.
Gli stati
A riposo, mentre si chiude, in pausa, mentre si risveglia. In pausa i tempi di riapertura sono sospesi; al risveglio la foglia si rialza e le coppie cominciano a riaprirsi una dopo l'altra, dall'attacco alle punte, nell'arco di tre quarti di secondo. La sera è un velo in multiply sopra le foglie e sotto la scritta. La scritta cambia con una sfocatura e uno scivolamento, il peso scende da 560 a 470 in pausa, e tiene la misura delle parole più lunghe; il pulsante ha aria-busy mentre si chiude, e una zona aria-live dice Notifications paused for 1 hour e Notifications on. Quando niente si muove il canvas non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BUSY | script.js | Pausing | La scritta mentre la foglia si chiude. |
DONE | script.js | Paused for 1 hour | La scritta quando la foglia si è chiusa. |
HOLD | script.js | 4 | I secondi in pausa prima che la foglia si risvegli da sola (un clic la risveglia prima). |
SPEED | script.js | 320 | Quanto corre il segnale lungo la foglia, in pixel al secondo: più basso, l'onda di chiusura si vede passare più piano. |
REACH | script.js | 1 | Quanto lontano arriva un tocco del puntatore lungo la foglia: 0, la foglia non se ne accorge. |
SNAP | script.js | 0.15 | I secondi che una fogliolina impiega a chiudersi. |
WAKE | script.js | 2.2 | I secondi che una fogliolina impiega a riaprirsi. |
LINGER | script.js | 1.3 | I secondi che una fogliolina toccata resta chiusa prima di cominciare a riaprirsi. |
LEAFLET | script.js | 8.6 | La lunghezza delle foglioline, in pixel: le pinne si allargano o si stringono per lasciare sempre spazio alla scritta. |
SPACING | script.js | 3.9 | Lo spazio fra una coppia di foglioline e la successiva, in pixel: più largo, la piuma diventa una lisca. |
DROOP | script.js | 1 | Quanto si affloscia tutta la foglia quando si chiude: 0, per niente. |
Quando usarla
Per l'azione che mette a tacere, sospende o fa dormire qualcosa: mettere in pausa le notifiche, la modalità non disturbare o concentrazione, rimandare un avviso, le ore di silenzio, la notte di una casa connessa. Sta bene nelle app di benessere e di meditazione, nei vivai e nei negozi di piante, nei siti di botanica e dove la calma è il prodotto. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.
Sul telefono
La pillola è alta 60 pixel e larga 340, o lo schermo meno 32; la foglia si ricostruisce alla larghezza vera, con meno coppie (112 su un telefono da 320) e la scritta sempre fra le due pinne, più piccola solo se non ci sta. Il dito che scorre sulla foglia la tocca come il mouse (touch-action: pan-y, così in su e in giù la pagina scorre ancora); il tocco chiude le coppie sotto il dito e mette in pausa partendo da lì.
Con il movimento ridotto
Niente onde, niente foglioline che si muovono, niente foglia che si affloscia, niente respiro al fuoco, e il puntatore non chiude niente. Al clic la foglia aperta svanisce in mezzo secondo sopra la foglia chiusa, mentre scende la sera; le scritte cambiano in dissolvenza, e il risveglio è la stessa dissolvenza al contrario. Premuta, la pillola si scurisce appena invece di rimpicciolire.
Trappole
- Le ombre cadevano verso la lampada invece che dalla parte opposta: sopra le foglioline c'era un alone chiaro e sul picciolo una banda pallida. L'ombra di un punto alto h cade in P + h · (−Lx/Lz, −Ly/Lz), lontano dalla lampada, e lo stesso vale per i vettori dell'affine dell'ombra.
- La scritta finiva fuori dalla foglia, tagliata contro il bordo destro: la prova di dove c'è spazio per le parole aveva mezzo pixel di differenza fra sopra e sotto e non passava mai. Ora lo spazio è il tratto più lungo in cui le foglioline interne delle due pinne, con la loro misura vera in quel punto, lasciano libera la fascia della scritta.
- Con le coppie a 5,4 pixel l'una dall'altra la piuma sembrava una lisca di pesce o una felce; a 3,9, quasi una contro l'altra come nella pianta vera, si legge come una mimosa.
- Le prime coppie, proprio all'attacco, incrociavano le foglioline dell'altra pinna in una X: le coppie partono a 9 pixel dall'attacco.
- La piuma chiusa era una riga scura e morta: vista un poco da davanti, le facce che si vedono sono quelle girate dall'altra parte della lampada, e le foglioline chiuse quasi lungo la nervatura sparivano. Ora quelle chiuse restano inclinate di 42 gradi verso la punta (la spina di pesce della pianta vera) e una faccia vista in controluce è illuminata da dietro, verde giallo.
Librerie
GSAP 3.15.0, Rosario (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
