Il contatore a filo

Contatori, SVG, FisicaGSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Quanti biglietti per un concerto: il numero non è scritto, è un filo bianco piegato a forma di cifra. Col più e col meno il filo si piega nella cifra nuova curva per curva, senza mai accartocciarsi; spinto oltre il limite si tende come un elastico verso il pulsante, si scalda di giallo e, lasciato, torna indietro vibrando.

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 wire stepper</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tickets of a concert: a label and a stepper. The number is one white wire bent into a digit: changing
         it, the wire bends into the next digit on springs; pushed past the limit it stretches towards the button
         like a rubber band and snaps back. The wire is drawn by the script -->
    <div class="tickets" data-tickets>
      <div class="tickets__label">
        <span class="tickets__name" id="tickets-name">General admission</span>
        <span class="tickets__note" id="tickets-note"><span class="tickets__note-in" data-note>€38 each</span></span>
      </div>

      <div class="stepper" data-stepper>
        <button class="stepper__btn" type="button" aria-label="Remove one ticket" data-less>
          <span class="stepper__disc" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M6.5 12h11"/></svg>
          </span>
        </button>
        <div class="stepper__value" role="spinbutton" tabindex="0" aria-labelledby="tickets-name" aria-describedby="tickets-note" aria-valuemin="1" aria-valuemax="4" aria-valuenow="3" aria-valuetext="3 tickets" data-value>
          <svg class="stepper__wire" viewBox="-100 -70 200 140" aria-hidden="true" data-wire></svg>
        </div>
        <button class="stepper__btn" type="button" aria-label="Add one ticket" data-more data-autoclic>
          <span class="stepper__disc" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M6.5 12h11M12 6.5v11"/></svg>
          </span>
        </button>
      </div>

      <p class="sr" aria-live="polite" data-said></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.

28 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 contatore a filo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una riga: a sinistra General admission e sotto, in grigio, €38 each; a destra una pillola blu cobalto alta 60 pixel con un meno e un più su due dischi più chiari e, in mezzo, il numero 3, che non è scritto con un carattere ma piegato in un filo bianco. Aprendo la pagina il filo arriva dritto, come un terzo meno, e si piega nel 3. Col più il filo si piega nella cifra dopo, curva per curva: la piega corre da un capo all’altro del filo, va un po’ oltre e torna indietro, e il filo fa un saltello in su; col meno si piega allo stesso modo e si abbassa. Arrivati a 4 il più si spegne e sotto l’etichetta sale Max 4 per order, in blu. Premendo ancora il più il numero non cambia: il filo si allunga verso il pulsante come un elastico, più sottile e giallo, la nota si sporge verso il pulsante e, lasciato, il filo torna indietro vibrando; tenendo premuto si allunga sempre di più. Lo stesso col meno sotto l’1, con At least 1 ticket. Un pulsante tenuto premuto ripete, sempre più in fretta; dalla tastiera il numero risponde alle frecce, a Home e a Fine. Con MAX oltre il 9, a dieci il filo si divide in due cifre e tornando a nove le due si riuniscono.

Come funziona

Una cifra, un tratto

Ogni cifra è un tratto solo, scritto con M, L e C in un riquadro largo 56 e alto 100 (lo 0 e l’8 sono anelli chiusi). Lo script lo divide in 96 punti a distanze uguali lungo il tratto e lo centra. A schermo il filo è un path che passa per i punti di mezzo con i punti come maniglie (Q), così non fa mai spigoli, con sotto la sua ombra spostata di poco.

Piegare, non spostare

Il filo di adesso e la cifra nuova si leggono come la direzione di ognuno dei 95 pezzetti, srotolata perché non salti mai di un giro, e la sua lunghezza. Durante il cambio ogni pezzetto gira dalla direzione vecchia alla nuova e il filo si ricostruisce sommando i pezzetti; poi lo si sposta dove deve stare il suo centro. Così a metà strada resta un filo che si arriccia e si srotola, invece del gomitolo che fanno i punti spostati in linea retta.

Il modo che piega meno

La cifra nuova si può stendere lungo il filo in avanti o all’indietro, e un anello partendo da qualunque suo punto: lo script prova tutti i modi (190 per lo 0 e l’8), toglie a ognuno i giri interi che lo separano dal filo di adesso e sceglie quello che chiede meno curvatura e meno strada.

L’onda e le molle

Ogni pezzetto comincia a girare un po’ dopo il precedente: la piega corre lungo il filo in RIPPLE secondi, dal primo pezzetto all’ultimo aggiungendo e al contrario togliendo, e ognuno gira in BEND secondi con back.out(OVERBEND), che lo porta un po’ oltre. Il filo vero segue questa forma su una molla per punto, tenuta anche dai vicini (WIRE): le molle danno il saltello (THROW) e raccordano un cambio che arriva prima che il precedente sia finito.

Il limite come un elastico

Oltre il minimo o il massimo il numero resta, ma la forma da seguire viene tirata verso il pulsante: il lato lontano sta fermo, i punti si spostano tanto più quanto sono vicini al pulsante (con una potenza di 1,6) e la cifra si schiaccia un poco in altezza. La tensione sale a 0,55 alla prima spinta e verso 1 a ogni ripetizione; il filo perde fino a un quarto dello spessore e prende il colore di --strain. Lasciato, la tensione torna a zero in 0,06 secondi e il rimbalzo lo fanno le molle.

Dita, tasti e anteprima

Su pointerdown il pulsante conta subito e dopo HOLD[0] secondi ripete, con ogni intervallo un quinto più corto del precedente fino a HOLD[2]; tenendo premuto la piega dura poco meno dell’intervallo, così ogni cifra fa in tempo a formarsi. Il click che segue una pressione non conta una seconda volta, quelli della tastiera e dell’anteprima sì. Il numero è un role="spinbutton" con aria-valuetext; dai pulsanti una regione aria-live dice il numero a pressione finita.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MIN`	script.js	`1`	Il numero più piccolo che si può scegliere.
`MAX`	script.js	`4`	Il numero più grande che si può scegliere (fino a 99, con due cifre).
`START`	script.js	`3`	Il numero quando si apre la pagina.
`BEND`	script.js	`0.46`	In quanti secondi ogni pezzetto del filo si piega nella cifra nuova.
`OVERBEND`	script.js	`1.5`	Quanto le pieghe vanno oltre la cifra nuova prima di tornare (0 = per niente).
`RIPPLE`	script.js	`0.14`	In quanti secondi la piega corre lungo il filo da un capo all’altro.
`THROW`	script.js	`150`	Quanto salta il filo: in su aggiungendo, in giù togliendo.
`SPRING`	script.js	`[600, 0.42]`	Le molle del filo: quanto sono rigide e quanto sono frenate (1 = senza vibrare).
`WIRE`	script.js	`8`	Quanto il filo sta insieme sulle sue molle: 0 ogni punto per conto suo, di più un filo più rigido.
`STRETCH`	script.js	`60`	Quanto si allunga il filo spinto oltre il limite, in unità della cifra (una cifra è alta 100).
`HOLD`	script.js	`[0.42, 0.16, 0.05]`	Tenendo premuto: dopo quanto comincia a ripetere, il primo intervallo e il più corto, in secondi.
`WORD`	script.js	`['ticket', 'tickets']`	La parola letta dopo il numero, per uno e per più di uno.

Provali nel Playground

Quando usarla

Per scegliere quante cose: biglietti, persone a cena, notti in albergo, pezzi nel carrello, porzioni, tazze di un ordine. Sta bene dove c’è un limite vero da far sentire, come i biglietti per persona di un concerto, e dove il numero conta: è piccolo come un controllo qualsiasi, ma ogni cambio si vede.

Sul telefono

Su un telefono la riga sta in 390 pixel, l’etichetta a sinistra e il contatore alto 60 a destra. Il dito fa come il mouse: un tocco conta uno, tenuto premuto ripete sempre più in fretta e oltre il limite tira il filo; la pressione lunga non apre menu e non seleziona, e due tocchi veloci non ingrandiscono la pagina.

Con il movimento ridotto

Il filo non si piega e non salta: la cifra nuova è subito al suo posto e compare con una dissolvenza. Oltre il limite il filo non si allunga, diventa soltanto giallo per un momento, e la nota sotto l’etichetta cambia in dissolvenza invece di scorrere.

Trappole

Spostando ogni punto in linea retta verso il suo posto nella cifra nuova il filo passava dal centro: a metà strada era un gomitolo accartocciato e più piccolo, anche con le molle fra i vicini. Interpolando la direzione dei pezzetti invece della posizione il filo resta un filo e si piega.
Le direzioni vanno srotolate: atan2 salta da 180 a −180 gradi e quel pezzetto farebbe un giro intero all’indietro. Si somma la differenza riportata fra −180 e 180 gradi, e alla cifra nuova si tolgono i giri interi che la separano dal filo di adesso.
Un filo ricostruito dalle sole direzioni non ha un posto suo e, a metà piega, scivola via: a ogni fotogramma lo si rimette col centro dove deve stare, fra il centro vecchio e quello nuovo.
Playwright, e con lui il collaudo, non clicca un pulsante con aria-disabled: il segno data-autoclic passa all’altro pulsante appena si spinge contro un limite, e all’inizio se si parte già dal massimo.
Il click che arriva dopo una pressione va ignorato, perché il passo l’ha già fatto pointerdown; ma se il dito esce dal pulsante il click non arriva, e il segno lasciato acceso si sarebbe mangiato il primo Invio della tastiera. Si spegne al fotogramma dopo il rilascio.
Cambiando la nota sotto l’etichetta la riga cambiava larghezza e il contatore, centrato con lei, scivolava di lato. Le tre note stanno una sopra l’altra nella stessa cella della griglia: l’etichetta è sempre larga quanto la più lunga.
A metà piega certi fili (lo 0 che si apre verso l’1, il 3 che diventa 4) sono più alti di una cifra e uscivano dalla pillola, tagliati dal suo bordo: se la forma supera ROOM si rimpicciolisce un poco attorno al suo centro, e se sporge ancora la si sposta dentro.
Con le molle legate ai vicini il conto diventa rigido e su un fotogramma lento esplode: i passi del conto si calcolano dalla rigidità vera, mezzo radiante al massimo per passo.

Librerie

GSAP 3.15.0, Schibsted Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 11 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.