Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il cerchio che conta
Un conto alla rovescia per il lancio di un prodotto, disegnato con una linea sola: un cerchio sottile si disegna, si apre in sei archi che diventano il numero, e ogni cifra nuova si ridisegna partendo dai tratti della precedente. A zero gli archi tornano cerchio. Stile minimal.
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 counting circle</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- one thin line: a circle that draws itself, breaks into arcs and counts down a product launch, each figure
redrawn from the arcs of the one before; at zero the arcs close back into the circle -->
<svg class="figure" viewBox="-90 -62 180 124" role="img" aria-label="Countdown" data-figure>
<g class="line" data-line></g>
</svg>
<p class="caption">
<span class="caption__clip"><span class="caption__name" data-name>Halo</span></span>
<span class="caption__clip caption__state" data-state>
<span class="caption__phrase caption__phrase--soon" data-soon>launches in</span>
<span class="caption__phrase caption__phrase--live" data-live>is live</span>
</span>
</p>
</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.
15 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 cerchio che conta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo una linea nera sottile disegna un cerchio partendo dall’alto, mentre il cerchio ruota un poco e si assesta; sotto, le lettere di «Halo launches in» salgono da una fessura una alla volta. Il cerchio si apre in sei archi con un piccolo scatto, poi gli archi volano al loro posto e diventano un 10: l’asta e il becco dell’uno, le due curve e i due lati dello zero. Ogni secondo il numero cambia, e la cifra nuova non compare dal nulla: ogni tratto va al tratto più vicino della cifra nuova, la testa parte per prima e la coda la segue, come una penna che ripassa, e arriva con un capello di rimbalzo. Dal 10 al 9 le due cifre si fondono in una. Dal 3 la linea diventa arancione. A zero lo zero si riapre in archi, gli archi si chiudono nel cerchio, che dà un piccolo colpo elastico; «launches in» cade via, al suo posto sale «is live» in arancione e il nome si fa più pesante, una lettera dopo l’altra. Dopo qualche secondo il cerchio si svolge e si cancella ruotando, le parole escono, e tutto ricomincia. Un clic o un tocco la fa ripartire.
Come funziona
Cifre fatte di archi
Ogni cifra è disegnata a mano con rette e archi di cerchio in una scatola alta 100: lo zero è uno stadio (due semicerchi e due lati), l’otto due cerchi, il sei una diagonale che entra in un cerchio, il nove è il sei capovolto. Ogni cifra ha esattamente tre tratti; quelle che ne hanno meno (l’uno, il sette) ripetono un pezzo di un tratto, sovrapposto, che non si vede. Ogni tratto si campiona in 72 punti messi a distanza uguale lungo la sua lunghezza, così due tratti qualsiasi hanno gli stessi punti e si possono mescolare.
Sei tratti per tutto
La linea sulla pagina sono sei path, sempre gli stessi. Il cerchio è fatto di sei archi da 60 gradi; un numero di due cifre usa tre tratti per cifra; una cifra sola li prende due volte, uno sopra l’altro. Le cifre si mettono in fila con la loro larghezza vera (quella dei punti, non della scatola), quindi l’uno è stretto e il 10 sta in centro come in un buon carattere.
Il tratto più vicino
A ogni cambio lo script prova tutti i modi di dare i sei tratti di ora ai sei tratti della cifra nuova (720) e, per ogni coppia, anche il tratto girato al contrario: sceglie il modo che sposta meno la linea, sommando le distanze dei punti. Per questo il 9 nasce dal 10 tenendo il cerchio dello zero e l’8 dal 9 tenendo il suo anello: la cifra si ridisegna da quella che c’era.
La testa e la coda
Il movimento è un tween solo su un orologio, e ogni punto ha il suo tempo: il punto al fondo del tratto parte dopo, di una quota TRAIL, e ogni tratto parte dopo il precedente di 35 millesimi. Il valore di ogni punto passa per l’EASE (back.out), quindi l’assestamento corre lungo la linea come un’onda. Intanto la coda del tratto si alza dalla pagina, tanto più quanto più lontano va, e si riposa all’arrivo: si vede la testa che corre e il tratto che si ridisegna dietro. Disegno e cancellazione sono stroke-dasharray, calcolato sulla lunghezza vera di ogni tratto.
La regia
Una timeline in pausa tiene solo i momenti (disegno, apertura, ogni secondo, chiusura, uscita) con tl.call, e ogni momento lancia i suoi tween dallo stato in cui trova la linea: così il giro dopo riparte pulito con restart. La scritta sotto è divisa in lettere che salgono e scendono da una finestra con overflow nascosto; la larghezza della finestra segue la frase nuova, e il peso del nome cresce lettera per lettera sull’asse wght del carattere variabile.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 10 | Il numero da cui parte il conto alla rovescia, da 1 a 99. |
TICK | script.js | 1 | Quanti secondi resta ogni numero: 1 è un conto alla rovescia vero. |
MORPH | script.js | 0.56 | Quanti secondi impiega un tratto a ridisegnarsi nella cifra nuova (resta sempre più corto del secondo). |
TRAIL | script.js | 0.42 | Quanto la coda di ogni tratto segue in ritardo la testa: 0 sposta tutto il tratto insieme, 0.8 lo fa scorrere come una penna. |
EASE | script.js | 'back.out(1.7)' | Come arrivano i tratti: back.out supera il punto di un capello e si assesta; elastic.out(1, 0.5) rimbalza di più, power3.out si ferma secco. |
STROKE | script.js | 1.5 | Lo spessore della linea, in centesimi dell’altezza della cifra. |
ACCENT_FROM | script.js | 3 | Da questo numero in giù la linea diventa del colore d’accento. |
HOLD | script.js | 2.4 | Quanti secondi resta il cerchio chiuso, a prodotto lanciato, prima di svolgersi e ricominciare. |
Quando usarla
Per l’attesa di un lancio: la pagina «coming soon» di un prodotto, il conto alla rovescia prima di una diretta, l’apertura di una vendita, l’inizio di un evento, la schermata prima di un video. Anche come caricamento elegante per un marchio che vive di linee sottili e spazio vuoto.
Sul telefono
La stessa animazione con le misure adattate: il cerchio e il numero occupano quasi tutta la larghezza, la linea resta sottile in proporzione, la scritta sotto si rimpicciolisce. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il cerchio compare in dissolvenza già disegnato, ogni numero sfuma nel successivo, a zero sfuma nel cerchio arancione e le parole cambiano con una dissolvenza.
Trappole
- A metà strada i tratti che vanno lontano si incrociavano e la cifra diventava un groviglio per un attimo: ora la coda di un tratto si alza dalla pagina mentre viaggia (fino al 72% del tratto, in proporzione alla strada che fa) e torna giù quando arriva, come una penna che ridisegna. I tratti che restano quasi fermi non si alzano.
- Con le punte tonde un tratto lungo zero disegna comunque un puntino: all’inizio del disegno e alla fine della cancellazione resterebbero sei puntini sul cerchio. Sotto una lunghezza minima il tratto si nasconde con visibility.
- Mescolando i punti con lo stesso indice, un tratto che nella cifra nuova va al contrario si rigira su se stesso e fa un nodo a metà strada: per ogni coppia si prova anche il tratto rovesciato e si tiene il più vicino.
- Dopo la scelta dei tratti più vicini gli archi del cerchio finale non sono più in ordine intorno all’anello, e la cancellazione (un arco dopo l’altro) andrebbe a salti: prima di svolgersi la linea si rimette nell’ordine giusto, che a cerchio chiuso è la stessa immagine.
- I movimenti partono dallo stato in cui trovano la linea, quindi non possono stare annidati in una timeline che si ripete (tornando all’inizio la ripasserebbe all’indietro): la timeline tiene solo tl.call, ogni momento crea i suoi tween e alla fine c’è reset e restart. Il primo momento sta a 0,02 secondi, perché restart non chiama una funzione messa esattamente a zero.
Librerie
GSAP 3.15.0, Jost (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
