Vai al contenuto
animorio
EN
Tutti i componenti

Il pulsante della ruota della bici

Pulsanti, Fisica, HoverCanvas, GSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

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.

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 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>

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.

39 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 ruota della bici» da Animorio e adattala al mio sito

Cosa fa

Su un fondo bianco una pillola blu notte con la scritta Add to basket in crema e, sotto, Gravel wheel · €189 in ambra. Sulla sua punta tonda sinistra è montata una ruota da bici disegnata su un canvas, come su un cavalletto da officina: una staffa d'alluminio con due bulloni esagonali entra nella pillola e tiene il perno. La ruota ha il copertone col fianco color cuoio e la scritta SPOKESMITH e 700×38C, il battistrada nero a spina di pesce, il cerchio d'alluminio lucidato con la luce in alto a sinistra, 24 raggi incrociati che partono dalle due flange del mozzo (quelli dietro più chiari e sottili) e finiscono nei nippli d'ottone, la valvola presta d'ottone col suo dado, un catarifrangente ambra fra due raggi, il mozzo con le flange arancioni anodizzate, il disco del freno forato con sei bulloni, la pinza arancione sulla staffa e la leva nera del perno passante. A un raggio è legato con lo spago un cartellino di carta col prezzo, che dondola. Sotto il mouse la ruota gira piano a ruota libera e la scritta si allarga. Al clic la pillola si schiaccia e rimbalza, la ruota prende velocità e la scritta diventa Spinning it up…: i raggi, la valvola, il catarifrangente e il battistrada si sfocano nel giro, la scritta del fianco diventa un anello, e il cartellino, spinto dalla forza centrifuga, vola in fuori sullo spago e gira con la ruota, mentre una fascia più chiara corre sulla pillola. Poi la pinza morde e trema, la ruota frena forte, il disco diventa d'oro paglierino e blu come l'acciaio scaldato e si raffredda piano; libera, la ruota dondola avanti e indietro finché la valvola, il suo lato pesante, si ferma in basso, e il cartellino ricade e oscilla. La scritta diventa In your basket con una spunta disegnata. Un secondo clic toglie la ruota dal carrello con una piccola spinta all'indietro.

Come funziona

La ruota su un canvas, a strati

Un 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.

La sfocatura come un otturatore

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 su uno spago vero

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.

La valvola pesa

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.

La regia e il pulsante vero

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.

Valori da cambiare

NomeFileDi partenzaCosa cambia
LABELscript.jsAdd to basketLe parole a riposo.
NOTEscript.jsGravel wheel · €189Le parole piccole sotto.
BUSYscript.jsSpinning it up…Le parole mentre la ruota gira.
DONEscript.jsIn your basketLe parole quando è nel carrello.
PRICEscript.js€189Il prezzo sul cartellino.
BRANDscript.jsSPOKESMITHIl nome sul fianco del copertone.
SPINscript.js34La velocità massima della ruota, in radianti al secondo.
HOLDscript.js1Quanti secondi gira al massimo prima del freno.
BRAKEscript.js0.8Quanti secondi impiega il freno a fermarla.
HEATscript.js1Quanto si scalda il disco dopo la frenata: 0 mai.
SPEEDscript.js1Quanto corre tutto: 0,6 lento, 1,6 svelto.

Provali nel Playground

Quando usarla

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.

Sul telefono

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.

Con il movimento ridotto

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.

Trappole

  • Con un passo di tempo per fotogramma, a velocità alta il punto dello spago girava intorno a un perno che saltava di quasi mezzo giro e il cartellino impazziva: il perno si sposta con la ruota dentro ognuno dei quattro passi.
  • La sfocatura con molte copie trasparenti di parti opache fa sparire i raggi a velocità alta: è giusto, come in una foto, ma il battistrada sotto va disegnato pieno, se no la ruota diventa trasparente.
  • La gravità della valvola a velocità alta frenava e spingeva a ogni giro: si sente solo quando la ruota è lenta, sotto i 10 radianti al secondo.
  • Il canvas sta fuori dal pulsante perché la ruota sporge a sinistra: un clic sulla ruota va passato al pulsante, se no metà ruota non si può premere.

Librerie

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.

Collaudo

Provata il 23 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.

Tutti i componenti