Il timer sulla linea che si accorcia

Timer, Fisica, Testo, SVGGSAPImpegnativaPeso compresso: Demo 9,8 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: il tempo per cui sono tenuti i posti di un concerto, in grandi cifre, e sotto una linea sottile che si accorcia. Le tacche dei minuti sono appese alla linea e cadono una alla volta quando la linea le supera, mentre la linea, liberata dal peso, scatta e vibra come una corda; le cifre perdono peso col tempo, da nerissime a un filo, senza cambiare larghezza. Negli ultimi trenta secondi l’accento, a zero «Hold expired» e «Hold again».

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 hold on the line</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the seat hold of a concert checkout: the time left is a thin line that gets shorter, the minute ticks hang
         from it and drop off one at a time as the line pulls back past them, and the figures lose weight as the
         time runs out. In the last seconds the accent; at zero the hold has expired and can be taken again -->
    <section class="hold" aria-label="Seat hold" tabindex="-1" data-hold data-autoclic>
      <header class="hold__top">
        <span class="hold__swap" data-label>Seats held for</span>
        <span class="hold__swap hold__swap--meta" data-meta>2 seats · Row F</span>
      </header>

      <p class="hold__time" role="timer" aria-live="off" aria-atomic="true">
        <span class="hold__digits" aria-hidden="true" data-digits></span>
        <span class="sr" data-time-words></span>
      </p>

      <div class="hold__rule" data-rule>
        <svg class="hold__svg" aria-hidden="true" data-svg>
          <path class="hold__track" data-track/>
          <path class="hold__line" data-line/>
          <g class="hold__ticks" data-ticks></g>
        </svg>
      </div>

      <div class="hold__foot">
        <span class="hold__swap hold__swap--note" data-note>Finish checkout to keep them.</span>
        <button class="hold__again" type="button" hidden data-again>
          <span class="hold__fill" aria-hidden="true"></span>
          <span class="hold__words">Hold again</span>
        </button>
      </div>

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

24 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 timer sulla linea che si accorcia» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, in alto a sinistra Seats held for e a destra, in grigio, 2 seats · Row F. Sotto, il tempo in cifre grandissime, e più giù una linea bianca sottile lunga quanto il componente, con dieci tacche appese sotto: una più lunga all’inizio e una per ogni minuto, sempre più fitte verso destra, perché la linea misura il tempo su una curva e gli ultimi minuti hanno più spazio. Dietro la linea resta, appena visibile, la traccia della prenotazione intera. In fondo, in grigio, Finish checkout to keep them. Aprendo la pagina le parole salgono da una fessura, la linea si allunga da sinistra, le tacche le cadono sopra una alla volta appena la linea le raggiunge, e dove si posano la linea si abbassa e vibra; intanto le cifre contano da 0:00 a 10:00 e prendono peso fino a un nero strettissimo. Poi il tempo scorre: la linea si ritira verso sinistra, sempre più in fretta man mano che il tempo finisce, e ogni volta che supera una tacca la tacca non ha più dove stare appesa e cade, girando un poco, e svanisce; la punta della linea scatta in su e un’onda leggera corre indietro lungo la linea. A ogni minuto la cifra dei minuti cade giù dalla sua finestra e la nuova scende al suo posto. Le cifre diventano più leggere con la linea, e insieme più larghe quanto serve per restare larghe uguale. Negli ultimi trenta secondi cifre, linea e tacche diventano arancioni. A zero cade l’ultima tacca, quella lunga dell’inizio; le parole cambiano in Hold expired, Seats released e Your seats went back on sale., lo 0:00 resta disegnato con un filo grigio e accanto alle parole in fondo sale il pulsante Hold again. Sotto il mouse il pulsante si riempie di bianco con un piccolo rimbalzo e la scritta si allarga; premuto, sparisce e la prenotazione ricomincia come all’apertura. Nell’anteprima della libreria il tempo corre molto più veloce, così si vede il giro intero.

Come funziona

La linea misura il tempo su una curva

La parte di linea che resta è (tempo che resta / HOLD) elevato a CURVE. Con CURVE minore di 1 gli ultimi minuti prendono più spazio, le tacche si fanno più fitte verso destra come su un regolo e la punta della linea corre sempre più in fretta man mano che il tempo finisce: a 0,55 gli ultimi trenta secondi di dieci minuti sono ancora quasi un quinto della linea. Le tacche stanno dove la curva mette i minuti, ogni MARK secondi.

Una corda con la punta libera

La linea è un path SVG ridisegnato a ogni fotogramma da 120 punti di una corda: l’equazione delle onde, calcolata a passi piccoli (il passo resta sotto il limite di stabilità) con uno smorzamento. L’inizio è fermo; la fine è dove finisce la linea, ed è libera, perché i punti oltre la punta copiano l’ultimo. Quando una tacca cade la corda riceve una spinta verso l’alto a forma di campana dove era appesa, quando una tacca si posa una verso il basso: la punta scatta e l’onda corre indietro. Ferma la corda, il path torna una riga sola e non si ricalcola niente.

Tacche che cadono davvero

Ogni tacca è appesa al punto della corda sotto di lei e la segue. Quando la linea la supera si stacca: cade con la gravità, con una piccola spinta all’indietro e una rotazione, perché la linea che si ritira le trascina la cima, e svanisce entro un centinaio di pixel. Ognuna ha una sua piccola differenza fissa, così ogni caduta è diversa ma sempre uguale da un giro all’altro. Quando la linea torna a distendersi le tacche le cadono sopra dall’alto appena le passa sotto.

Il peso che scende, la larghezza che resta

Le cifre sono in Roboto Flex col taglio da titolo (opsz 144) e il loro peso (wght) segue la linea, da WEIGHT[0] a WEIGHT[1]. Un carattere più leggero è anche più stretto: appena il carattere è caricato, per ogni peso lo script cerca per bisezione la larghezza (wdth) che tiene le dieci cifre larghe come al peso pieno, e la usa a ogni fotogramma. Così il tempo si assottiglia sul posto, da nero e strettissimo a un filo largo, e niente intorno si sposta.

Le cifre e la regia

Ogni cifra sta in una finestra alta quanto l’inchiostro: la vecchia cade giù e la nuova scende con un back.out. Più spesso cambia una cifra, più in fretta rotola, così non resta mai indietro col tempo; sotto un settimo di secondo cambia e basta. Il tempo che resta si conta dall’orologio, quindi una scheda lasciata in background finisce comunque in orario. Il clic dell’anteprima (detail 0) fa correre il tempo PREVIEW volte più veloce, poi più piano negli ultimi secondi, e allo scadere preme da solo Hold again.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`HOLD`	script.js	`600`	Per quanti secondi sono tenuti i posti.
`MARK`	script.js	`60`	Ogni quanti secondi c’è una tacca appesa alla linea.
`LAST`	script.js	`30`	Gli ultimi secondi, nel colore d’accento.
`CURVE`	script.js	`0.55`	Come la linea misura il tempo: 1 = in modo uniforme; sotto 1 gli ultimi minuti hanno più spazio e la punta corre sempre più in fretta.
`WEIGHT`	script.js	`[860, 110]`	Il peso (wght) delle cifre con tutto il tempo davanti e a zero.
`SPEED`	script.js	`1`	Quanto in fretta passa il tempo: 1 = il tempo vero.
`PREVIEW`	script.js	`[180, 9]`	Nell’anteprima della libreria il tempo corre più veloce: quante volte, e quante negli ultimi secondi.
`STRING`	script.js	`[1.6, 3.2]`	La linea come una corda: quanto in fretta un’onda la percorre e quanto presto si calma.
`ENDED`	script.js	`['Hold expired', 'Seats released', 'Your seats went back on sale.']`	Le parole quando il tempo è scaduto: in alto a sinistra, in alto a destra e in fondo.

Provali nel Playground

Quando usarla

Per il tempo per cui un sito di biglietti tiene i posti scelti, per la prenotazione di un tavolo o di una stanza in attesa del pagamento, per un carrello con la merce tenuta da parte, per un codice che scade, per l’asta di un oggetto che sta per chiudersi.

Sul telefono

Il componente prende tutta la larghezza meno i margini (fino a 360 pixel) e le cifre si rimpiccioliscono col telefono restando le stesse; la linea, le tacche e la corda si ricalcolano sulla misura nuova anche a metà di una caduta. Il pulsante risponde al tocco come al mouse: si riempie e la scritta si allarga mentre il dito preme.

Con il movimento ridotto

Niente si muove: la linea si accorcia lo stesso, perché è il tempo, ma le tacche superate svaniscono dove sono, la corda non vibra, le cifre cambiano senza cadere e le parole cambiano in dissolvenza. Il peso delle cifre scende lo stesso. Hold again rimette la linea intera, che compare in dissolvenza con le sue tacche.

Trappole

Su una linea in proporzione al tempo gli ultimi trenta secondi di dieci minuti erano sedici pixel, e la parte più tesa non si vedeva: la linea misura il tempo su una curva (CURVE), che dà spazio alla fine.
Abbassando il peso le cifre si stringevano e tutto il numero si accorciava a vista: per ogni peso si cerca, una volta sola, la larghezza (wdth) che tiene le cifre larghe uguale. La misura si fa con l’opsz fisso, così vale a ogni grandezza del carattere.
Col tempo veloce dell’anteprima la cifra dei minuti cambiava ogni terzo di secondo ma rotolava per mezzo secondo, e per un attimo si leggeva il minuto vecchio coi secondi nuovi: la durata del giro segue il ritmo dei cambi.
Le cifre nere e strettissime, mentre si scambiavano, si sovrapponevano in una macchia: ogni cifra ha una finestra alta quanto il suo inchiostro, misurato dai margini del carattere, e quella che esce è già fuori quando entra la nuova.
Le tacche che si posavano partivano troppo in alto e passavano davanti alle cifre: partono da poco sopra la linea.
Il video dell’anteprima si ferma quando la demo resta ferma: il giro veloce, l’attesa sul tempo scaduto e Hold again premuto da solo stanno tutti in tween e timeline di GSAP.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

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

Collaudo

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