Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
L’interruttore del porcellino di terra
L’interruttore Do not disturb delle impostazioni di un telefono, e il pomello è un porcellino di terra visto di fianco, in piedi sulle sue quattordici zampe in una finestrella di luce. Acceso, fa quello che fa un porcellino di terra disturbato: ritira le zampe, abbassa le antenne, inarca la schiena e chiude la corazza in una palla, che rotola fino in fondo, batte e rimbalza, mentre nella finestra scende la sera con la luna. Spento, la palla torna indietro dondolando, si apre e le zampe fanno qualche passo.
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 pill bug switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Do not disturb switch of a phone's settings, and the knob is a pill bug seen from the side in a little
window of daylight. Off, it stands on its fourteen legs with its antennae out. Turned on, it curls up into an
armoured ball, rolls to the far end of the switch and the window goes dusk; off again, the ball rolls back,
rocks to a stop and opens out, and the legs walk for a moment -->
<div class="tile" data-dnd>
<span class="tile__text">
<label class="tile__name" for="dnd-switch">Do not disturb</label>
<span class="tile__state" id="dnd-state" data-state>Alerts come through</span>
</span>
<button class="bug" id="dnd-switch" type="button" role="switch" aria-checked="false" aria-describedby="dnd-state" data-switch data-autoclic>
<svg class="bug__art" viewBox="0 0 184 56" aria-hidden="true" focusable="false" data-art></svg>
<svg class="bug__art bug__art--alt" viewBox="0 0 184 56" aria-hidden="true" focusable="false" data-art-alt></svg>
<span class="bug__glass" aria-hidden="true"></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.
29 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 «L’interruttore del porcellino di terra» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una tessera color carta con la scritta Do not disturb e sotto, più piccola, Alerts come through; accanto c’è l’interruttore, una finestrella a pillola alta 56 pixel con un velo d’ombra sotto il bordo di sopra, dentro la luce chiara del giorno e un pavimento appena più scuro. Sul pavimento sta un porcellino di terra visto di fianco: una corazza a cupola grigio azzurra di placche sovrapposte come tegole, ognuna con il suo filo di luce sul dorso, l’ombra che getta su quella dietro e il bordo laterale smerlato; sotto, quattordici zampine sottili, sette per lato, la coda con le due piccole punte e davanti le antenne a tre snodi. Accendendo, le zampe si ritirano e il corpo si abbassa, la schiena si inarca sempre di più e la corazza si chiude in una palla perfetta con la testa sopra la coda; la palla rotola verso destra sempre più in fretta, girando su sé stessa senza strisciare, batte contro il fondo, torna indietro di qualche pixel e si ferma. Intanto la finestra diventa blu sera, compare una falce di luna, il nome si fa viola e la riga sotto diventa Alerts are silenced. Spegnendo, la palla rotola a casa, oltrepassa appena il suo posto e dondola avanti e indietro fino a fermarsi; poi si apre, per un attimo un po’ più piatta del solito, tira fuori le antenne e le zampe fanno qualche passo sul posto, con un’onda che corre dalla coda alla testa, e le antenne danno due scatti. Col mouse sopra, il porcellino trasale: si inarca un poco, le zampe si agitano e le antenne si alzano o si abbassano verso il puntatore; da palla, rotola di qualche pixel verso il mouse. Anche un clic sul nome accende e spegne.
Come funziona
Un interruttore vero
La finestrella è un button con role switch e aria-checked, la label for col nome e aria-describedby sulla riga sotto, che cambia con lo stato. Invio e Spazio accendono e spengono, la freccia a destra accende e quella a sinistra spegne, il clic sul nome anche; una riga aria-live dice il nuovo stato. L’anello del fuoco si vede solo usando la tastiera.
Un dorso che non si allunga
Il dorso è un arco di una sola curvatura lungo sempre LEN: arricciarsi vuol dire solo girare un angolo più grande, da 1,15 radianti (la cupola a riposo) al 98,5 per cento di un giro, quando il raggio diventa quello della palla, 21 pixel. Ogni punto si calcola da quell’arco: centro, raggio LEN/angolo, la normale che esce dalla schiena. Il punto più basso viene appoggiato al pavimento (o la pancia sopra, sulle zampe), così il corpo si siede da solo mentre le zampe rientrano.
Placche come tegole
Ogni placca è una fascia dell’arco fra il dorso e una profondità che a riposo segue la cupola (la pancia resta quasi piatta) e nella palla arriva al centro, dove la testa chiude sulla coda. Le placche si disegnano dalla coda alla testa, ognuna un poco sopra quella dietro, e prendono il colore da come guardano la luce (la normale nel mezzo contro una luce dall’alto a sinistra); sopra, il filo chiaro del dorso, l’ombra del bordo, il bordo laterale smerlato e una luce che passa da dall’alto a tonda, come su una sfera, mentre si chiude.
Zampe e antenne
Sette paia di zampe partono dalla pancia di ogni placca grande e arrivano al pavimento, con il ginocchio piegato in avanti davanti e indietro dietro. Camminando, ogni piede gira su un piccolo ellisse sfasato rispetto a quello prima, un’onda che corre dalla coda alla testa, e il lato lontano va mezzo passo indietro. Le antenne sono tre segmenti che piegano sempre di più; il mouse le alza o le abbassa e due scatti a molla arrivano quando si apre.
Rotolare senza strisciare
La palla è una massa calcolata quattro volte a fotogramma su gsap.ticker, col passo di tempo limitato a 1/30 di secondo, e il suo giro è legato alla strada fatta (angolo = spostamento / raggio). Verso il fondo scende un pendio leggero (ROLL) e rimbalza tenendo BOUNCE della velocità; verso casa lo stesso pendio finisce in una conca smorzata (SETTLE), dove dondola: solo quando è ferma, e quindi dritta con la testa sopra la coda, si apre.
Regia e quiete
Chiudersi, aprirsi, la sera e i passi sono tween e timeline di GSAP; il sussulto sotto il mouse e la spinta della palla verso il puntatore sono due piccole molle. Un clic a metà strada riprende da dove si è: la palla che torna riparte in avanti, il corpo che si chiude si riapre. A ogni fotogramma si confronta una chiave di valori arrotondati: quando niente si muove, niente si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CURL | script.js | 0.5 | I secondi che il porcellino impiega a chiudersi in una palla. |
UNCURL | script.js | 0.65 | I secondi che impiega ad aprirsi di nuovo. |
ROLL | script.js | 950 | Quanto è ripido il pendio su cui la palla rotola fino in fondo, in pixel al secondo al quadrato. |
BOUNCE | script.js | 0.34 | Quanta velocità tiene la palla quando batte contro il fondo (0, si ferma lì). |
SETTLE | script.js | 9 | Quanto è stretta la conca in cui la palla torna a casa: più alto, si ferma prima. |
FLINCH | script.js | 0.14 | Quanto il porcellino comincia a chiudersi sotto il mouse o il dito (0, niente). |
PEEK | script.js | 5 | Di quanti pixel la palla rotola verso il mouse quando è chiusa. |
SCURRY | script.js | 1.4 | I secondi in cui le zampe camminano sul posto dopo che si è aperto. |
PLATES | script.js | 7 | Le placche grandi sulla schiena, ognuna con il suo paio di zampe. |
Quando usarla
Per un interruttore che deve dire chiuso al mondo: Non disturbare, la modalità concentrazione, la sospensione delle notifiche, la modalità privata o il silenzioso di un’app, o in un’app per la natura, il giardino, i bambini. La palla e la sera dicono acceso anche senza leggere. È un pezzo da mettere da solo, dove si nota, non in un elenco lungo di impostazioni accanto ad altri dieci.
Sul telefono
Stessa misura che sul computer: l’interruttore è 184 per 56 pixel e a 390 pixel il nome e la finestrella stanno su una riga; sotto i 360 pixel la finestrella si rimpicciolisce un poco, il disegno con lei. Il tocco accende e spegne; appena il dito si appoggia il porcellino trasale come col mouse, e da palla rotola di qualche pixel. Niente antenne che seguono il puntatore, che col dito non c’è.
Con il movimento ridotto
Niente movimento: il porcellino in piedi nel giorno e la palla nella sera sono due disegni fermi, e accendendo o spegnendo uno sfuma nell’altro in meno di mezzo secondo, con il colore del nome. Niente sussulto e niente passi; il clic, il tocco e la tastiera funzionano come sempre.
Trappole
- Con il dorso dritto a riposo il porcellino sembrava un bruco. Ora a riposo il dorso è già un arco (1,15 radianti), e la profondità di ogni placca si calcola perché la pancia resti quasi piatta sotto la cupola: la stessa formula dell’arco va dalla cupola alla palla senza un secondo disegno.
- Le placche della palla si fermavano prima del centro, che mostrava la pancia scura come una fessura o un occhio. Nella palla ora tutte arrivano al centro, l’arco gira il 98,5 per cento di un giro e la testa, disegnata per ultima e arrotondata in avanti, si posa sopra la coda.
- La palla vista di fianco, con ogni placca del suo colore a spicchi, sembrava una torta tagliata. Mentre si chiude la luce passa a un gradiente tondo da sfera, le placche tengono solo un terzo del loro chiaroscuro, i solchi si fermano prima del centro e il bordo laterale sparisce.
- Aprirsi in un punto qualunque della corsa avrebbe messo la testa per terra o di lato. La palla torna in una conca smorzata, dondola, e si apre solo quando è ferma al suo posto: lì il giro, legato alla strada fatta, è di nuovo zero.
- La pancia scura che riempie il centro della palla, allargata da subito, faceva una mezzaluna nera sotto l’arco mentre si chiudeva; ora cresce solo nell’ultima metà della chiusura.
Librerie
GSAP 3.15.0, Onest (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
