Gli ingranaggi del backup

Caricamento, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 20 KBGSAP 28 KBGratisScarica lo zip

Il backup di un portatile mostrato come il movimento di un orologio visto dal fondello di zaffiro: ruote d’ottone che ingranano davvero, l’ancora che scatta e il bilanciere che oscilla sulla sua spirale. Ogni tic dello scappamento è il due per cento del backup, e una lunga lancetta azzurrata sull’ultima ruota lo segna sulla scala della cassa. Se il disco si stacca l’ancora si blocca e il bilanciere si ferma di colpo; alla fine il bilanciere si spegne, un riflesso passa sul metallo e il backup è completo.

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, viewport-fit=cover">
  <title>The backup movement</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the backup panel of a laptop, shown as a watch movement seen through its sapphire case back: brass wheels that
         really mesh, a lever that snaps and a balance that swings on its breathing hairspring. Every tick of the
         escapement is two percent of the backup, and a long blued hand on the last wheel reads it off the scale on the
         case. The movement is painted on the canvas by script.js; the words and the button are HTML -->
    <section class="backup" aria-labelledby="backup-title" data-backup>
      <div class="backup__case" role="progressbar" aria-labelledby="backup-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not backing up" data-bar>
        <canvas class="backup__movement" aria-hidden="true" data-paint></canvas>
      </div>
      <div class="backup__foot">
        <div class="backup__words">
          <h2 class="backup__title" id="backup-title">
            <span class="backup__swap" data-title>Studio laptop</span>
            <svg class="backup__tick" viewBox="0 0 20 20" aria-hidden="true" data-tick><path d="M4.6 10.4l3.5 3.5 7.3-7.6" pathLength="1"/></svg>
          </h2>
          <p class="backup__meta"><span class="backup__swap" data-meta>Last backup yesterday at 18:40</span></p>
        </div>
        <div class="backup__side">
          <p class="backup__figure" aria-hidden="true"><span class="backup__swap" data-figure>128 GB</span></p>
          <button class="backup__btn" type="button" data-action data-autoclic><span class="backup__label" data-label>Back up now</span></button>
        </div>
      </div>
      <p class="sr" role="status" 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.

30 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 «Gli ingranaggi del backup» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, da solo al centro, un pannello scuro con gli angoli tondi. In alto la cassa d’acciaio lucido di un orologio vista dal dietro: sull’anello interno una scala da 0 a 100 con una tacca per ogni tic, e sotto 128 GB; dietro il vetro una platina scura perlata, ponti color champagne a Côtes de Genève con viti azzurrate e rubini, il bariletto con il suo cricchetto lucidato a raggiera, tre ruote d’ottone, la ruota di scappamento, l’ancora d’acciaio con le due palette di rubino e il bilanciere dorato con la spirale blu. Una lunga lancetta azzurrata parte dal centro e punta lo zero. Sotto, Studio laptop e Last backup yesterday at 18:40, a destra 128 GB e il pulsante Back up now. Premuto, il cricchetto fa tre scatti (si carica la molla), il bilanciere riceve una spinta e comincia a oscillare cinque volte al secondo, sfocato dalla velocità, mentre la spirale si stringe e si allarga; a ogni passaggio l’ancora scatta da un lato all’altro e la ruota di scappamento avanza di mezzo dente, le ruote girano ognuna col suo rapporto e la lancetta fa un passo sulla scala. Il numero accanto al titolo e i gigabyte sotto avanzano a passi insieme a lei. Quando i dati si fermano un attimo la ruota resta bloccata e il bilanciere perde un po’ di slancio, poi riparte. Un backup su due, a metà, il disco Archive si stacca: l’ancora si inceppa, il bilanciere si ferma di colpo sulla forchetta e trema, la cassa sussulta e il titolo diventa rosso; Retry libera l’ancora con uno scatto e il backup riprende da lì. Arrivata la lancetta in fondo, il bilanciere fa le sue ultime oscillazioni sempre più corte e si ferma, un riflesso di luce attraversa l’ottone e le righe dei ponti, compare la spunta accanto a Backup complete. Back up again riporta indietro la lancetta con tutto il treno di ruote e ricomincia.

Come funziona

Ruote a evolvente calcolate

Ogni ruota è disegnata dal suo numero di denti z e dal suo modulo m: raggio primitivo m·z/2, raggio di base con l’angolo di pressione di 20°, testa a un modulo e piede a 1,25. Il fianco di ogni dente è la curva evolvente, inv(α) = tan α − α, calcolata punto per punto fra il raggio di base e la testa, con un filo di gioco. Le coppie che ingranano hanno lo stesso modulo e stanno esattamente a una somma di raggi primitivi l’una dall’altra; la fase di ogni ruota è calcolata perché un vano stia davanti al dente dell’altra sulla linea dei centri, e da lì ognuna gira per il rapporto dei denti, all’opposto della compagna. Così i denti rotolano gli uni negli altri senza mai compenetrarsi.

Un tic, due per cento

La ruota di scappamento ha quindici denti e un pignone da dodici, che ingrana con l’ultima ruota da ventiquattro: l’ultima ruota gira a metà velocità. A ogni tic la ruota di scappamento passa di mezzo dente, 12°, quindi la lancetta sull’ultima ruota fa 6°: cinquanta tic coprono i 300° della scala, e ogni tic è esattamente il due per cento. Il treno prosegue all’indietro fino al bariletto (pignone da dieci e ruota da quarantacinque, pignone da dieci e bariletto da cinquantasei), che in tutto il backup gira di pochi gradi.

Lo scappamento ad ancora

Il bilanciere è isocrono: θ = A sin(ωt), con la stessa frequenza qualunque sia l’ampiezza. L’ancora si muove solo mentre il perno del bilanciere è dentro la forchetta, cioè finché |θ| è sotto l’angolo di sollevamento: lì l’angolo dell’ancora segue quello del bilanciere, fuori resta contro il suo fermo. Siccome il bilanciere passa da quella zona in pochi millisecondi, la fisica gira a passi di 1/1500 di secondo e l’ancora scatta davvero in un fotogramma. Durante il passaggio la ruota di scappamento fa il suo tic in tre tempi: un filo di rinculo mentre si sblocca, la spinta lungo la faccia della paletta, poi la caduta sull’altra.

La forza viene dai dati

Un tic parte solo se i byte arrivati bastano a coprirlo: altrimenti la ruota resta bloccata, il bilanciere non riceve la spinta e la sua ampiezza cala con una costante di 2,4 s, come in un orologio che si scarica. Ogni tic con forza riporta l’ampiezza verso quella di regime. In pausa un freno porta la costante a 0,22 s, alla fine a 0,28 s: il bilanciere fa le sue ultime oscillazioni, sempre alla stessa frequenza, e si ferma. Con l’errore il bilanciere passa a una molla rigida e poco smorzata attorno al punto in cui il perno urta la forchetta bloccata, e trema; l’ancora e la ruota di scappamento ricevono un colpo su due molle loro.

Luce sul metallo

L’ottone delle ruote si colora con un gradiente conico che parte dalla direzione della luce meno l’angolo della ruota: le due zone chiare restano ferme mentre la ruota gira sotto, come la luce sulla satinatura circolare, e il bordo prende un filo di luce in alto a sinistra. La platina con la perlatura (dischetti sovrapposti, ognuno col suo gradiente conico), i ponti con le Côtes de Genève (bande parallele, ognuna con la luce che la attraversa, e un riflesso largo sopra), le viti, i rubini, la cassa e il vetro si dipingono una volta sola in tre canvas fuori schermo; l’ancora, il bilanciere, la lancetta e il cricchetto sono sprite girati. Il bilanciere si disegna in sei istanti del fotogramma con opacità divisa, per lo sfocato di movimento, e la spirale di Archimede ruota ogni spira della sua parte dell’angolo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SECONDS`	script.js	`6`	Quanto ci mettono ad arrivare i dati del backup nella demo, in secondi (uno vero segue i suoi byte; il movimento non va più veloce di cinquanta tic).
`SIZE`	script.js	`128`	I gigabyte da copiare, scritti anche sulla cassa.
`MACHINE`	script.js	`'Studio laptop'`	Il computer di cui si fa il backup.
`DISK`	script.js	`'Archive'`	Il disco del backup, quello che nella demo si stacca.
`BEAT`	script.js	`5`	La frequenza del bilanciere, in hertz: due tic per oscillazione, e ogni tic è il 2% del backup (5 è un orologio ad alta frequenza, 36.000 alternanze l’ora).
`SWING`	script.js	`220`	Di quanti gradi oscilla il bilanciere da una parte e dall’altra mentre va.
`FAIL_EVERY`	script.js	`2`	Nella demo, un backup ogni quanti va storto (0 mai).
`FAIL_AT`	script.js	`0.56`	Fin dove arrivano i dati del backup che va storto, da 0 a 1.
`GLINT`	script.js	`0.9`	Il riflesso che passa sul metallo a backup completo: 0 niente, 1 forte.
`BLUR`	script.js	`6`	In quanti istanti di ogni fotogramma si disegna il bilanciere, per lo sfocato di movimento (1 niente).

Provali nel Playground

Quando usarla

Per un’attesa di qualche secondo che ha un esito e si presta a una metafora di precisione: un backup, una copia di sicurezza, un’esportazione lunga, la sincronizzazione di un archivio, la verifica di un disco. Il movimento dice bene «ogni pezzo arriva al suo posto, un tic alla volta»; per un caricamento di un secondo è troppo ricco, meglio una barra semplice.

Sul telefono

Il pannello prende la larghezza dello schermo meno 32 pixel (358 a 390) e la cassa resta di 248, disegnata alla densità vera dello schermo fino a due volte. Il pulsante è una pillola alta 34: col dito si schiaccia e rimbalza, e la scritta si allarga sull’asse della larghezza solo sotto il mouse. I testi lunghi sono stati accorciati perché la riga sotto il titolo stia accanto al pulsante anche a 390.

Con il movimento ridotto

Il bilanciere resta fermo e l’ancora non scatta: le ruote e la lancetta avanzano a tacche seguendo i dati, perché sono loro a dire a che punto si è. Niente sussulto della cassa all’errore, niente riflesso alla fine, la lancetta torna a zero subito; le parole nuove e la spunta arrivano in dissolvenza.

Trappole

A cinque hertz il bilanciere attraversa l’angolo di sollevamento in meno di un fotogramma: con un passo di fisica per fotogramma l’ancora non vedeva mai il perno entrare nella forchetta e il treno non partiva. Ora la fisica gira a passi di 1/1500 di secondo dentro ogni fotogramma.
Il bilanciere disegnato una volta per fotogramma a quella velocità sembrava saltare a caso (stroboscopio). Ora si disegna in sei istanti del fotogramma, presi dalla fase e dall’ampiezza interpolate, con l’opacità divisa: diventa una scia di raggi come in un video vero.
Con i dati più veloci del movimento la lancetta restava indietro e non si vedeva mai il bilanciere perdere slancio: a 4 Hz cinquanta tic chiedono 6,25 s. A 5 Hz il movimento ne chiede 5, i dati della demo 6, e le pause dei dati si vedono.
L’ancora, disegnata sotto il bilanciere come in un orologio vero, spariva sotto la sua corona e sotto il ponte: ora sta sopra il bilanciere ma sotto il ponte, che copre la punta della forchetta, e il ponte del bilanciere arriva da destra invece che passarle sopra.
La perlatura con ogni dischetto orientato a caso sembrava ghiaia. Quella vera è fatta con lo stesso utensile, quindi ora i dischetti hanno tutti quasi lo stesso orientamento e diventano le squame regolari della platina.
Le Côtes de Genève con bande strette e molto contrastate sembravano cartone ondulato. Ora le bande sono più larghe, col contrasto più basso, e sopra c’è un riflesso largo che attraversa tutto il ponte, come la luce sul metallo vero.

Librerie

GSAP 3.15.0, Saira (font variabile) 5.3.0.

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

Collaudo

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