Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
I prezzi a contachilometri
La scelta del piano di un servizio di backup, con ogni prezzo sui rulli di un contachilometri: cambiando da mensile ad annuale, o scegliendo un piano, i rulli contano davvero fino al prezzo nuovo, col riporto da un rullo all’altro, mossi e sfocati mentre girano, e ci atterrano con una piccola molla; il totale da pagare oggi corre come la colonnina di un distributore.
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 odometer pricing</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans-condensed@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the plans of a backup service. Every price stands on the wheels of a mechanical counter, drawn by the script:
changing the billing or the plan, the wheels run to the new price like an odometer, carrying from one wheel
to the next, blurred while they spin, and land on it with a little spring -->
<section class="picker" aria-labelledby="picker-title" data-picker data-autoclic>
<header class="picker__head">
<h2 class="picker__title" id="picker-title">Choose a plan</h2>
<p class="picker__sub">Backed up every night, kept far from home.</p>
</header>
<div class="billing" role="radiogroup" aria-label="Billing" data-billing>
<span class="billing__thumb" aria-hidden="true" data-thumb></span>
<span class="billing__row">
<button class="billing__opt" type="button" role="radio" aria-checked="true" data-period="month">Monthly</button>
<button class="billing__opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-period="year">Yearly <span class="billing__save" data-save>Save 20%</span></button>
</span>
<!-- the same words in ink, cut to the size of the thumb: they change colour exactly at its edge -->
<span class="billing__row billing__row--ink" aria-hidden="true" data-ink>
<span class="billing__opt">Monthly</span>
<span class="billing__opt">Yearly <span class="billing__save" data-save>Save 20%</span></span>
</span>
</div>
<div class="plans" role="radiogroup" aria-labelledby="picker-title" data-plans></div>
<div class="due">
<div class="due__words">
<span class="due__title" id="due-title">Due today</span>
<span class="due__then" data-then><span class="due__then-in" data-then-in></span></span>
</div>
<div class="due__amount">
<span class="due__cur" aria-hidden="true">€</span>
<span class="wheels wheels--big" aria-hidden="true" data-meter></span>
<span class="sr" data-due-sr></span>
</div>
</div>
<button class="go" type="button" data-go>
<span class="go__face" data-go-face>
<svg class="go__spin" viewBox="0 0 20 20" aria-hidden="true" data-go-spin><path d="M10 2.5a7.5 7.5 0 1 1-7.5 7.5"/></svg>
<span class="go__label" data-go-label>Continue with Household</span>
</span>
</button>
<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="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.
53 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 «I prezzi a contachilometri» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda chiara: Choose a plan, una riga sul backup, un controllo Monthly / Yearly con l’etichetta verde Save 20%, tre piani uno sotto l’altro (Solo, Household con l’etichetta Most chosen, Studio) e in fondo Due today col totale e il pulsante Continue with Household. Ogni prezzo sta nella finestrella di un contatore meccanico: rulli scuri per gli euro, chiari per i centesimi, col punto stampato fra i due e le cifre vicine che si affacciano sopra e sotto. Aprendo la pagina tutti i contatori partono da zero e salgono ai prezzi. Passando a Yearly il cursore bianco scivola sotto la parola e la scritta diventa scura proprio sul suo bordo; i prezzi dei piani scendono uno dopo l’altro (da €11.99 a €9.59) e il totale sale all’anno intero (€115.08): il rullo dei centesimi gira di continuo, quello alla sua sinistra si muove solo mentre il precedente passa dal 9 allo 0, i rulli più veloci diventano strisce sfocate, poi tutto rallenta, va un pelo oltre il prezzo e torna indietro. Sotto Due today arriva, in verde, quanto si risparmia. Scegliendo un piano la sua casella si riempie e si disegna la spunta, i suoi rulli danno una piccola scossa, il piano si apre su quello che comprende mentre quello lasciato si chiude, il totale corre al prezzo nuovo e il pulsante cambia nome. Premuto, il pulsante mostra Opening checkout con un arco che gira e poi torna com’era.
Come funziona
Un contachilometri vero
Il valore è un numero di centesimi che scorre con continuità, e ogni rullo si calcola da lui: il rullo dei centesimi è il valore stesso, ogni altro rullo è la parte intera del valore diviso per la sua potenza di dieci, più quanto il resto ha superato l’ultima unità prima del giro (da 0,99 a 1,00 le unità girano insieme all’ultimo centesimo). Così i riporti salgono lungo la fila come in una macchina, e un prezzo che passa da €11.99 a €115.08 conta davvero tutti i centesimi di mezzo.
Le cifre su un cilindro
Ogni rullo è un cilindro con dieci cifre a un decimo di giro l’una dall’altra, disegnato su un canvas: una cifra girata di un angolo φ sta a R·sin φ dal centro ed è schiacciata di cos φ in altezza, e una sfumatura scurisce il rullo verso l’alto e il basso, dove si allontana. I centesimi hanno i rulli chiari, come il rullo dei decimi di un contachilometri; uno zero in testa è una faccia vuota, che si riempie insieme al riporto del rullo alla sua sinistra.
Una sfocatura vera
Mentre i rulli si muovono, ogni fotogramma si disegna più volte lungo il tempo in cui l’otturatore resta aperto (BLUR fotogrammi), una ogni pixel e mezzo di strada, e le copie si sommano in modo additivo su un foglio trasparente, che poi si tinge del colore delle cifre. Un rullo che percorre più di qualche cifra per fotogramma diventa le strisce che le sue dieci cifre lascerebbero: per ogni colonna di pixel la parte di un giro che è inchiostro, calcolata una volta sola dalle cifre vere.
Corsa e atterraggio
La corsa segue la curva RUN in SPIN secondi fino a LAND[0] centesimi oltre il prezzo, poi una molla smorzata lo riporta al suo posto partendo ferma. Il valore si calcola per qualunque istante, non a passi: è quello che permette alla sfocatura di guardare un poco nel passato. Scegliendo un piano i suoi rulli danno una scossa che va prima indietro, così un prezzo che finisce in 9 non scatta subito il riporto.
Il piano scelto
I piani sono un radiogroup con le frecce, Home e Fine; il piano scelto si apre su quello che comprende mentre il precedente si chiude con la stessa curva e la stessa durata, e tutti si aprono all’altezza della lista più alta, così la scheda non cambia mai misura. Il controllo Monthly / Yearly ha sopra una copia delle parole in nero ritagliata con clip-path alla misura del cursore: il colore cambia proprio sul suo bordo.
Quando niente si muove
Un solo ciclo sul ticker di GSAP ridisegna soltanto i contatori in movimento, una volta ancora quando si fermano, e poi si addormenta. Un clic dell’anteprima della libreria (detail 0) sulla scheda alterna mensile e annuale e il piano dopo; una regione aria-live dice i prezzi nuovi e il totale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLANS | script.js | [['Solo', '1 computer, 1 TB', 4.99, […]], …] | I piani: nome, che cosa copre, prezzo al mese in euro, che cosa comprende. |
PICK | script.js | 1 | Il piano consigliato, scelto quando si apre la pagina (0 è il primo). |
SAVE | script.js | 20 | Quanto costa meno un mese pagando all’anno, in percentuale. |
SPIN | script.js | 1.1 | I secondi che i rulli impiegano a correre al prezzo nuovo. |
RUN | script.js | 0.66, 0, 0.2, 1 | Come i rulli prendono velocità e rallentano. |
LAND | script.js | [0.22, 15] | L’atterraggio: di quanti centesimi i rulli vanno oltre il prezzo e quanto è dura la molla che li riporta. |
BLUR | script.js | 1 | La sfocatura dei rulli che girano: per quanti fotogrammi l’otturatore resta aperto (0 = niente). |
STAGGER | script.js | 0.07 | I secondi fra la partenza di un prezzo e quella del successivo. |
OPEN | script.js | 0.5 | I secondi che un piano impiega ad aprirsi su quello che comprende. |
SIZE | script.js | [20, 32] | L’altezza delle cifre sui rulli, nei piani e nel totale, in pixel. |
Quando usarla
Per la scelta del piano di un abbonamento: la pagina dei prezzi di un’app o di un servizio, la finestra per passare a un piano superiore, il riepilogo prima del pagamento. Sta bene dove si vuole far sentire che il prezzo è un conto vero, e dove il risparmio dell’anno deve vedersi.
Sul telefono
A 390 pixel la scheda sta in 358, coi piani uno sotto l’altro e i contatori della stessa misura; Most chosen va a capo sotto il nome. Il tocco sceglie il piano come il clic, i piani si abbassano appena sotto il dito e due tocchi veloci non ingrandiscono la pagina.
Con il movimento ridotto
I rulli non girano: il prezzo nuovo è subito al suo posto e il contatore compare con una dissolvenza; il cursore va al suo posto senza scivolare, i piani si aprono e si chiudono di colpo e le cose comprese compaiono in dissolvenza, e la riga sotto Due today cambia sfumando.
Trappole
- Disegnando le copie della sfocatura una sopra l’altra con un’opacità di 1/n, a fine corsa le cifre resterebbero chiare a due terzi e poi scatterebbero piene: le opacità non si sommano. Le copie vanno sommate in modo additivo (lighter) su un foglio trasparente, poi tinte con source-in.
- Un rullo che fa centinaia di giri al secondo, campionato qualche volta per fotogramma, mostrerebbe cifre a caso che lampeggiano invece di una sfocatura: oltre qualche cifra per fotogramma si passa alle strisce calcolate dall’inchiostro delle dieci cifre.
- Un atterraggio oltre il prezzo fatto con back.out, o con una molla sulla corsa intera, va oltre in proporzione alla strada: da €11.99 a €115.08 il rullo dei centesimi farebbe giri interi in più. Il pezzo in più va dato in centesimi, uguale per ogni corsa.
- Con i prezzi che finiscono in 9, andare oltre di quasi mezzo centesimo fa partire il riporto e per un attimo sembra che il prezzo cambi: l’atterraggio sta a 0,22 centesimi, e la scossa del piano scelto va prima indietro.
- Il canvas non fa scaricare un carattere da solo, e i file di Fontsource sono divisi per alfabeti: si chiede document.fonts.load con le cifre, prima di misurarle e di disegnare, e si rifanno le misure quando arriva un carattere nuovo.
- Le liste di cose comprese, di lunghezza diversa, farebbero cambiare altezza alla scheda mentre un piano si apriva e l’altro si chiudeva: tutti si aprono all’altezza della più alta, con la stessa curva.
Librerie
GSAP 3.15.0, Sofia Sans (font variabile) 5.3.0, Sofia Sans Condensed (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP + CustomEase 31 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.
