
Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Il pulsante Add to basket di un negozio di bici, nello stile ricco: sulla punta tonda della pillola blu è montata una ruota da gravel, come su un cavalletto da officina, con il copertone a fianco color cuoio, i raggi incrociati, il freno a disco e un cartellino del prezzo legato a un raggio. Al clic la ruota prende velocità finché i raggi si sfocano e il cartellino vola in fuori, poi la pinza morde, il disco si scalda d'oro e di blu e la ruota si ferma dondolando con la valvola in basso; la scritta diventa In your basket.
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 bike wheel button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the bike wheel button: the Add to basket pill of a bike shop, with a gravel wheel bolted on its round left end
as on a workstand. A click spins the wheel up until the spokes blur and the price tag tied to a spoke flies
outwards, then the disc brake bites, the rotor glows and the wheel rocks to a stop with its valve at the
bottom; the tag drops and swings, and the words become In your basket. A second click takes it out again -->
<div class="wheel" data-wheel>
<button class="wheel__btn" type="button" data-btn data-autoclic>
<span class="wheel__fill" aria-hidden="true" data-fill><span class="wheel__band" data-band></span></span>
<span class="wheel__words">
<span class="wheel__line" data-line>
<svg class="wheel__tick" viewBox="0 0 20 20" aria-hidden="true"><path d="M4.6 10.4l3.5 3.5 7.4-8" pathLength="1" data-tick/></svg>
<span class="wheel__word" data-word>Add to basket</span>
</span>
<span class="wheel__note" data-note>Gravel wheel · €189</span>
</span>
</button>
<canvas class="wheel__art" aria-hidden="true" data-art></canvas>
<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>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.
39 valori da cambiare
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 ruota della bici» da Animorio e adattala al mio sitoUn canvas quadrato centrato sul perno, sopra la punta sinistra della pillola. Si disegna dal fondo: l'ombra a terra, la staffa che entra nella pillola, i raggi dietro, il cerchio, il copertone, i raggi davanti coi nippli, la valvola, il catarifrangente, il mozzo, il disco, la pinza, il perno e i riflessi che non girano. I raggi sono incrociati due volte: ognuno parte dalla flangia spostato in avanti o indietro rispetto al punto in cui arriva sul cerchio.
Ogni parte che gira si disegna più volte lungo l'arco che la ruota ha percorso nell'ultimo fotogramma, ognuna con l'opacità divisa per quante sono, fino a dieci copie: a riposo è nitida, in corsa i raggi diventano un velo. Sopra una certa velocità il battistrada è solo una fascia e la scritta del fianco un anello.
Il cartellino è un punto con la gravità, mosso con l'integrazione di Verlet in quattro passi per fotogramma, e tenuto alla lunghezza dello spago da un punto che gira con la ruota: quando la ruota corre la forza centrifuga lo porta in fuori da sola, e quando si ferma ricade e dondola.
Quando nessuno la spinge la ruota sente la gravità del suo lato pesante, la valvola: un'accelerazione proporzionale al seno dell'angolo fra la valvola e il basso, più l'attrito. Dopo la frenata la ruota dondola come un pendolo finché la valvola si ferma in basso.
Una timeline GSAP porta la velocità al massimo, la tiene per HOLD secondi, chiude la pinza, frena in BRAKE secondi con power3.out, scalda e raffredda il disco e cambia le parole. Il disegno sta sul ticker di GSAP e si spegne quando niente si muove. È un button vero: Invio e Spazio, aria-busy, aria-disabled e una regione aria-live; anche un clic sulla ruota lo preme.
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Add to basket | Le parole a riposo. |
NOTE | script.js | Gravel wheel · €189 | Le parole piccole sotto. |
BUSY | script.js | Spinning it up… | Le parole mentre la ruota gira. |
DONE | script.js | In your basket | Le parole quando è nel carrello. |
PRICE | script.js | €189 | Il prezzo sul cartellino. |
BRAND | script.js | SPOKESMITH | Il nome sul fianco del copertone. |
SPIN | script.js | 34 | La velocità massima della ruota, in radianti al secondo. |
HOLD | script.js | 1 | Quanti secondi gira al massimo prima del freno. |
BRAKE | script.js | 0.8 | Quanti secondi impiega il freno a fermarla. |
HEAT | script.js | 1 | Quanto si scalda il disco dopo la frenata: 0 mai. |
SPEED | script.js | 1 | Quanto corre tutto: 0,6 lento, 1,6 svelto. |
Per il pulsante Aggiungi al carrello di un negozio di bici o di ricambi, di un'officina che prende prenotazioni, di un noleggio di bici o di un'app di ciclismo; o per un pulsante che fa partire qualcosa che prende velocità e si ferma.
Il componente è largo 314 pixel e alto 164, con la pillola di 60; sugli schermi più stretti si rimpicciolisce tutto insieme. Senza hover la ruota sta ferma a riposo; il tocco fa partire il giro come il clic, anche toccando la ruota.
La ruota non gira e il cartellino non dondola: al clic la fascia riempie la pillola in una dissolvenza e le parole cambiano svanendo, con la spunta già disegnata.
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Provata il 23 ottobre 2026
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.
Con l’email e la password del tuo account.
oppure con l’email
Hai fatto l’accesso come .
Con l’account scarichi lo zip di ogni animazione e di ogni pacchetto, gratis.