Il pulsante del cartello

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

Il pulsante Sign out di un account, dipinto come la porta di una piccola bottega: verde bottiglia, parole dorate, e nella punta tonda della pillola il cartello Open / Closed appeso a un chiodo d'ottone con un cappio di spago. Il cartello è un corpo rigido che dondola sul chiodo e gira su sé stesso; lo spago sono due fili di punti verlet. Il puntatore che lo sfiora lo fa oscillare; al clic il cartello fa più di un giro, i fili si attorcigliano e lo sollevano, lui torna indietro e avanti un paio di volte e si ferma su Closed: Signing out…, poi See you soon, Ada, e la porta si spegne. Il secondo clic lo rigira su Open: Welcome back, Ada.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The shop sign button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the shop sign button: the Sign out button of an account, painted like the door of a small shop, with the Open /
         Closed sign hanging from a brass nail in its round left end on a loop of twine. The sign is a rigid body that
         swings, the twine is two strands of verlet points: the pointer brushing the sign sets it swinging, a click
         spins it round on the nail, the strands twist and lift it, it winds back and forth and stops on Closed -->
    <div class="shop" data-shop>
      <button class="shop__btn" type="button" data-btn data-autoclic>
        <span class="shop__fill" aria-hidden="true"></span>
        <canvas class="shop__sign" aria-hidden="true" data-sign></canvas>
        <span class="shop__words" data-words>
          <span class="shop__word" data-word>Sign out</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.

29 valori da cambiare

Apri il Playground

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 del cartello» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola alta 60 pixel color verde bottiglia, come la porta verniciata di una bottega, con un filo dorato all'interno del bordo e un'ombra morbida sotto. A destra, in Mona Sans color oro chiaro, Sign out; nella punta tonda di sinistra un chiodo d'ottone e, appeso con un cappio di spago, un cartello di smalto color crema largo 60 pixel con due occhielli d'ottone, una cornice verde e la parola OPEN in un serif verde e pieno. Il cartello getta un'ombra morbida sulla porta. All'arrivo il cartello, rimasto un po' storto, dondola fino a raddrizzarsi. Il puntatore che entra sulla pillola le dà una piccola spinta e il cartello oscilla; passandoci sopra lo si sfiora e dondola di più, lo spago si allenta e si tende; la scritta si allarga e il fondo si gonfia con un rimbalzo. Al clic la scritta diventa Signing out…, il cartello fa un giro e un quarto intorno al chiodo: si vede in prospettiva, il bordo più vicino un poco più alto, si stringe sul coseno fino a mostrare il suo spessore e poi il retro, con CLOSED in rosso. I due fili dello spago si attorcigliano dal chiodo in giù e lo sollevano di qualche pixel; lo spago attorcigliato lo riporta indietro, il cartello gira avanti e indietro sempre meno e si ferma su CLOSED mentre la porta si scurisce e la scritta diventa See you soon, Ada, poi Sign in. Il secondo clic lo fa girare all'indietro: Signing in…, la porta torna verde, il cartello si ferma su OPEN e arriva Welcome back, Ada, poi di nuovo Sign out. Con la tastiera il fuoco mostra un anello verde e il cartello dondola appena; Invio o Spazio lo girano. Al telefono il tocco lo gira e il dito trascinato sopra lo fa dondolare.

Come funziona

Un corpo rigido con due movimenti

Il cartello ha due gradi di libertà, calcolati a passi di 1/240 di secondo con il fotogramma limitato a 1/30: l'oscillazione θ sul chiodo, nel piano della porta (θ'' = −ω² sin θ − c θ', ω = 2π · SWING, con un arresto morbido oltre 0,26 radianti perché non esca mai dalla pillola né copra la scritta), e la rotazione φ intorno alla verticale del chiodo. Lo spago è la molla di torsione: φ'' = −ωt² (φ − φ0) − 2ζ ωt φ', dove φ0 è il giro a cui lo spago non è attorcigliato e ωt = 2π · TWIST.

Il giro del clic, calcolato prima

Il clic sposta φ0 di mezzo giro (il cappio gira sul chiodo) e dà al cartello una velocità. Quale velocità serve per fare proprio TURNS giri prima che lo spago lo fermi? Lo script fa correre la molla in avanti e cerca la velocità per bisezione (quaranta tentativi, pochi millisecondi). Così il cartello va sempre un poco oltre, torna indietro col suo smorzamento e si ferma sulla faccia giusta, qualunque siano TWIST e DAMPING.

Lo spago: due fili di punti verlet

Ogni filo ha dieci punti in tre dimensioni, fissati al chiodo e all'occhiello, che si calcola dal cartello (±15 · cos φ in larghezza, ±15 · sin φ in profondità, girato di θ). Integrazione di Verlet con gravità e attrito, quattordici giri di vincoli di lunghezza un poco lenti: i fili restano indietro e si allentano quando il cartello si muove. Quando il cartello è girato, i punti vicini al chiodo vengono tirati su un'elica: i due fili si avvolgono uno sull'altro per un tratto che cresce con la torsione, e il cartello sale perché la parte aperta a V si accorcia (caduta = b + √((L − b)² − 15²)).

Il cartello in prospettiva, a strisce

Le due facce si dipingono una volta su canvas fuori dallo schermo, al doppio della densità. A ogni fotogramma il cartello si disegna in 28 strisce verticali: ogni striscia ha la sua profondità z = u · sin φ e la sua scala f / (f − z), quindi il bordo vicino è più alto di quello lontano. Con cos φ negativo si prende il retro, con le colonne lette al contrario. Sopra, su un livello a parte con source-atop, l'ombra di quando si gira di taglio e un riflesso che lo attraversa; lo spessore è una banda larga 1,7 · |sin φ|. Il livello si posa sulla porta con shadowBlur: l'ombra segue la sagoma vera.

Lo sfiorare del puntatore

La velocità del puntatore si misura fra un pointermove e l'altro. Se è sopra il cartello (nel suo sistema, girato di θ), il momento della sua spinta intorno al chiodo, (r × v) / |r|², diventa un'accelerazione di θ, più una piccola spinta su φ. Il puntatore che entra nella pillola dà una spinta dal lato da cui arriva. Quando oscillazione, rotazione e spago sono fermi il ciclo smette di calcolare e di disegnare.

Gli stati

Un button vero con aria-disabled mentre esce o entra, una zona aria-live che dice Signing out…, Signed out. See you soon, Ada., Signing in… e Signed in. Welcome back, Ada. La pillola è larga quanto la più lunga delle sei scritte misurata già larga (font-stretch 116%), così non cambia mai misura. Le parole vecchie escono prima che entrino le nuove; la porta chiusa è un secondo strato che compare con la variabile --shut.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SIGN_OUT`	script.js	`Sign out`	La scritta da collegati.
`SIGNING_OUT`	script.js	`Signing out…`	La scritta mentre esce; la dice anche la zona aria-live.
`SIGNED_OUT`	script.js	`See you soon, Ada`	Il saluto quando è uscito. Il nome è inventato: in un sito vero è quello dell'utente.
`SIGN_IN`	script.js	`Sign in`	La scritta da scollegati, che offre la strada del ritorno.
`SIGNING_IN`	script.js	`Signing in…`	La scritta mentre rientra.
`SIGNED_IN`	script.js	`Welcome back, Ada`	Il bentornato quando è rientrato.
`FRONT`	script.js	`OPEN`	La parola sul davanti del cartello, da collegati. Se è lunga il carattere si rimpicciolisce.
`BACK`	script.js	`CLOSED`	La parola sul retro, da scollegati.
`WAIT`	script.js	`1.3`	I secondi dell'uscita o dell'entrata simulate. In un sito vero la risposta del server.
`SAID`	script.js	`0.9`	I secondi in cui resta il saluto prima che il pulsante offra la strada del ritorno.
`TURNS`	script.js	`1.25`	Quanti giri fa il cartello al clic prima che lo spago lo fermi.
`SWING`	script.js	`1.15`	Le oscillazioni al secondo sul chiodo: più alto un cartello leggero, più basso uno pesante.
`TWIST`	script.js	`0.72`	Quante volte al secondo il cartello gira avanti e indietro sullo spago attorcigliato.
`DAMPING`	script.js	`0.3`	Quanto presto si ferma: 0,05 dondola e gira a lungo, 1 si ferma subito.
`BRUSH`	script.js	`1`	Quanto il puntatore che lo sfiora lo fa dondolare: 0 non lo tocca.

Provali nel Playground

Quando usarla

Per l'uscita da un account, o l'entrata, in un sito con un carattere artigianale: una bottega online, un caffè, una libreria, un forno, un negozio di quartiere; anche come interruttore Aperto / Chiuso nel pannello di chi gestisce un locale (prenotazioni aperte, ordini sospesi). L'uscita va collegata alla propria: qui è tutto simulato.

Sul telefono

La pillola è larga circa 270 pixel e a 390 ci sta con margine; se le scritte sono più lunghe dello spazio il carattere si rimpicciolisce. Il tocco gira il cartello; il dito trascinato sopra lo fa dondolare.

Con il movimento ridotto

Il cartello sta fermo e diritto, lo spago teso; non dondola e non gira. Al clic la faccia OPEN svanisce sulla faccia CLOSED (e viceversa), la porta si scurisce e le scritte cambiano in dissolvenza; la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena).

Trappole

Disegnando le strisce affiancate al pixel frazionario, i bordi sfumati di due strisce vicine lasciavano passare il fondo: righe verticali chiare su tutto il cartello. Ogni striscia ora si allarga di un pixel sotto la successiva.
Con una spinta a occhio il cartello a volte si fermava sulla faccia sbagliata, o girava troppo cambiando TWIST e DAMPING. La velocità del clic ora si calcola facendo correre la molla in avanti e cercandola per bisezione.
Con il cappio largo come il cartello, lo spago non aveva lunghezza da attorcigliare: due occhielli a 30 pixel su fili lunghi 22 lasciano al più 7 pixel di treccia. Gli occhielli stanno a ±15, così la treccia si vede e solleva il cartello.
La velocità del puntatore si misurava con l'orologio della fisica, che si ferma quando il cartello dorme: il primo passaggio sopra un cartello fermo non lo muoveva. Ora si misura con performance.now.
Il puntatore che attraversava di corsa il cartello, largo 60 pixel, lo toccava per pochi millisecondi e non si vedeva niente. La zona sensibile è più larga di 10 pixel per lato e la spinta più forte, e l'ingresso nella pillola dà una spinta sua.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

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