Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
Il grafico a raggiera
Le spese di un mese in un anello di 120 tacche sottili, come un quadrante, nello stile minimal: ogni categoria è un arco di tacche. Passando su una categoria, sull'anello o nella legenda, le sue tacche si allungano una dopo l'altra su molle sfalsate e prendono l'accento, le altre si accorciano, e al centro la cifra conta con le cifre che corrono più pesanti e più strette.
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 tick ring chart</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">
<!-- a month of spending drawn as a dial of thin radial ticks: every category is an arc of ticks. Pointing at a
category (on the ring or in the key) its ticks grow one after another on staggered springs and turn the
accent, the others shorten, and the figure in the middle counts to its amount. The ring is drawn by the
script on a canvas; the key carries the numbers for screen readers -->
<section class="spend" aria-label="Spending by category" data-spend data-autoclic>
<div class="spend__ring" data-ring>
<canvas class="spend__canvas" aria-hidden="true" data-canvas></canvas>
<div class="read" aria-hidden="true">
<span class="read__label" data-label></span>
<span class="read__amount" data-amount></span>
<span class="read__note" data-note></span>
</div>
</div>
<ul class="key" role="list" aria-label="Categories" data-key></ul>
<p class="sr" aria-live="polite" data-said></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.
33 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 grafico a raggiera» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, a sinistra un anello di tacche radiali sottili, a destra la legenda. Le tacche sono 120 posti intorno al cerchio, partendo dall'alto in senso orario: ogni categoria di spesa di ottobre (Rent, Savings, Food, Travel, Bills, Leisure) ne occupa tante quante la sua parte del mese, con due posti vuoti fra una categoria e l'altra, e ha il suo grigio, dal più chiaro per la più grande al più scuro per la più piccola. Al centro: October, il totale $4,220 e spent this month. Aprendo la pagina le tacche crescono in giro dall'alto e il totale conta da zero; la legenda entra riga per riga, e sotto ogni voce una riga sottile si allunga quanto la sua parte. Passando col puntatore su un arco dell'anello, o su una voce della legenda, le tacche di quella categoria si allungano una dopo l'altra in un'onda che parte da sotto il puntatore (dalla legenda parte dalla prima tacca dell'arco), superano la misura di un pixel e si posano, e diventano arancioni; le altre si accorciano e si scuriscono. Sul cerchio sottile dentro le tacche si apre un arco arancione, al centro il nome sale al posto di October, la cifra conta fino alla spesa della categoria e sotto compare la sua parte (39% of October). Mentre la cifra conta, ogni cifra che sta cambiando diventa più pesante e più stretta, e si posa quando si ferma: le prime a fermarsi sono quelle a sinistra. Uscendo, tutto torna a riposo con un'onda.
Come funziona
Le tacche, contate bene
Le categorie si dividono i 120 posti meno i vuoti col metodo dei resti più grandi, così le tacche sommano sempre giuste e ogni categoria ne ha almeno una; con lo stesso metodo le percentuali della legenda sommano 100. Ogni tacca ha un posto, una categoria e una lunghezza, in frazione della larghezza dell'anello: al resize si ridisegna e basta.
Una molla per tacca, legate fra loro
Ogni tacca è una molla smorzata (SPRING) verso la sua lunghezza obiettivo, calcolata a passi di 1/240 s sul ticker di GSAP, col passo limitato a 1/30 s. In più tira le vicine (PULL) in base a quanto ciascuna è lontana dal suo obiettivo: l'onda ha un corpo, le tacche accanto sentono il colpo, e due vicine con obiettivi diversi arrivano comunque tutte e due.
L'onda sfalsata
Scegliendo una categoria, ogni tacca riceve il nuovo obiettivo con un ritardo proporzionale alla sua distanza (sul giro) dal punto di partenza: STAGGER secondi a tacca per quelle che si allungano, un quarto per quelle che si accorciano. La lunghezza decide tutto il resto: il colore passa dal grigio della categoria all'accento in una banda stretta, così una tacca è grigia o arancione e attraversa la miscela in fretta, e lo spessore cresce di mezzo pixel.
La cifra a cifre tabellari
Ogni segno della cifra sta in una scatola sua, larga uguale per tutte le cifre, contata da destra: così una cifra che diventa più pesante o più stretta non sposta le vicine. Quando una cifra cambia si scalda (wght più HEAT, wdth meno 14) e si raffredda su una molla: le cifre a sinistra si fermano prima e si posano per prime.
Si ferma quando è ferma
Il ciclo si accende solo quando qualcosa si muove e si spegne quando tutte le tacche sono al loro obiettivo, le cifre fredde e i tween finiti: a riposo il canvas non si ridisegna.
Tastiera, dito e anteprima
Le voci della legenda sono pulsanti con aria-pressed e le frecce, Inizio e Fine passano dall'una all'altra; Esc torna al totale, e una riga per gli screen reader legge categoria, spesa e parte. Col dito si tocca un arco o una voce, e toccandola di nuovo, o fuori, si torna al totale. Un clic da script (l'anteprima della libreria) fa il giro di tutte le categorie in una timeline GSAP, torna a riposo e ricomincia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TICKS | script.js | 120 | Quante tacche fanno l'anello, vuoti compresi. |
GAP | script.js | 2 | Le tacche vuote fra una categoria e l'altra. |
STAGGER | script.js | 0.016 | I secondi fra una tacca e la successiva nell'onda. |
SPRING | script.js | [320, 0.56] | La molla di ogni tacca: quanto è rigida e quanto è frenata (1 = senza superare la misura). |
PULL | script.js | 0.22 | Quanto una tacca tira le vicine, in parte della sua rigidità. |
LENGTHS | script.js | [0.075, 0.15, 0.04] | La lunghezza di una tacca a riposo, scelta e spenta, in parte della larghezza dell'anello. |
HEAT | script.js | 300 | Quanto peso prende una cifra che corre (la cifra è 520). |
ARRIVAL | script.js | 1.1 | I secondi in cui le tacche crescono in giro all'apertura. |
MONTH | script.js | 'October' | Il mese che somma la cifra al centro. |
CURRENCY | script.js | '$' | Il segno davanti alle cifre. |
SPENDING | script.js | [{ name: 'Rent', amount: 1650 }, …] | Le categorie e quanto è andato in ognuna (fino a dieci). |
Quando usarla
Per un'app di conti di casa o di budget, il riepilogo del mese di una banca, le spese di un viaggio o di un progetto, il pannello di un negozio con le vendite per reparto: ovunque un totale si divide in poche parti.
Sul telefono
La legenda va sotto l'anello, su due colonne, e l'anello prende la larghezza dello schermo fino a 340 pixel. Col dito si tocca un arco o una voce per sceglierla, e toccandola di nuovo o fuori si torna al totale: le stesse onde del computer.
Con il movimento ridotto
Le tacche sono già al loro posto e cambiano lunghezza di colpo, con l'anello che si riaccende in dissolvenza; la cifra cambia senza contare e senza cambiare peso, le scritte al centro si scambiano in dissolvenza.
Trappole
- Con le parti arrotondate una per una le tacche non sommano 120 e le percentuali non sommano 100: tutte e due si contano col metodo dei resti più grandi.
- Le cifre tabellari restano larghe uguali solo a peso e larghezza fissi: con wght e wdth che cambiano cifra per cifra la cifra ballava. Ogni segno sta in una scatola di larghezza fissa, contata da destra.
- Una tacca legata alle vicine con la molla classica (verso la loro media) non arriva mai al suo obiettivo dove due categorie si toccano: la spinta si calcola sulla distanza di ognuna dal proprio obiettivo.
- Il colore mescolato in modo lineare fra grigio e arancione dava, a metà onda, tacche color salmone: il cambio avviene in una banda stretta della lunghezza, con una curva morbida.
- Le due scritte al centro che si scambiavano insieme si coprivano per un attimo: la nuova parte quando la vecchia è uscita.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi wght, wdth e opsz) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,4 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.
