La brina dell'archivio

Caricamento, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

L'archiviazione di una cartella nel cold storage fatta come un vetro che ghiaccia: dai bordi del pannello crescono davvero, un poco a ogni fotogramma, felci di brina con i rami a sessanta gradi, e dietro una velatura e piccole stelle a sei punte. Quanto vetro è ghiacciato è quanto manca. Alla fine una luce attraversa il ghiaccio e c'è scritto Archived; Undo appanna il vetro e scioglie la brina dal centro verso i bordi.

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 archive frost</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- moving a folder to cold storage, shown as a pane of glass that frosts over: feathers of frost grow in from the
         edges of the pane with side branches at sixty degrees, little six armed stars settle in the haze behind
         them, and how much of the glass has frozen is how far the archive has got. The frost is grown and painted by
         script.js on the canvas; the words and the button are HTML on top of it -->
    <section class="vault" aria-labelledby="vault-title" data-vault>
      <div class="vault__head">
        <div class="vault__words">
          <h2 class="vault__title" id="vault-title"><span class="vault__swap" data-title>2023 client work</span></h2>
          <p class="vault__meta"><span class="vault__swap" data-meta>1,284 files · last opened 14 months ago</span></p>
        </div>
        <svg class="vault__flake" viewBox="0 0 32 32" aria-hidden="true" data-flake>
          <g>
            <path d="M16 3v26M4.74 9.5l22.52 13M4.74 22.5l22.52-13"/>
            <path d="M19.4 4.6L16 8L12.6 4.6M27.57 13.24L22.93 12L24.17 7.36M24.17 24.64L22.93 20L27.57 18.76M12.6 27.4L16 24L19.4 27.4M4.43 18.76L9.07 20L7.83 24.64M7.83 7.36L9.07 12L4.43 13.24"/>
          </g>
        </svg>
      </div>

      <div class="vault__pane" role="progressbar" aria-labelledby="vault-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not archived" data-pane>
        <canvas class="vault__frost" aria-hidden="true" data-frost></canvas>
        <div class="vault__read" aria-hidden="true">
          <p class="vault__big">
            <span class="vault__swap" data-big>38.6 GB</span>
            <svg class="vault__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
          </p>
          <p class="vault__under"><span class="vault__swap" data-under>Standard storage</span></p>
        </div>
      </div>

      <div class="vault__foot">
        <p class="vault__file"><span class="vault__swap" data-file>Ready to move to Cold Storage</span></p>
        <button class="pill" type="button" data-action data-autoclic><span class="pill__label" data-label>Archive</span></button>
      </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.

38 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 «La brina dell'archivio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una scheda blu acciaio larga 380 pixel: in alto 2023 client work, 1,284 files · last opened 14 months ago e un fiocco di neve disegnato; in mezzo un pannello di vetro scuro con un riflesso obliquo e, grande al centro, 38.6 GB con sotto Standard storage; in basso Ready to move to Cold Storage e il pulsante Archive. Premuto, il pulsante diventa Cancel col contorno, il fiocco comincia a girare con un piccolo rimbalzo e il titolo dice Moving to Cold Storage, con i gigabyte spostati e i secondi che mancano; al centro del vetro la percentuale, in basso il nome del file che passa e quanti ne sono già passati. Dai bordi del vetro, prima dagli angoli, crescono tronchi di brina bianchi che si piegano piano come piume e buttano rami laterali a sessanta gradi, più corti verso la punta, che a loro volta buttano rametti: sulle punte che crescono si accendono piccoli bagliori azzurri a croce. Dietro i rami una velatura azzurrina riempie il vetro a chiazze, e nella velatura si posano piccole stelle di ghiaccio a sei punte. Il ghiaccio avanza col trasferimento e il centro, dov'è il numero, gela per ultimo; il numero resta sempre leggibile, con un alone scuro. A 100% l'ultimo vetro gela, la brina si fa fitta e chiara come un vetro smerigliato, una fascia di luce la attraversa, il numero diventa Archived in blu scuro con una spunta che si disegna e il pulsante dice Undo. Undo appanna tutto per un attimo, poi la brina si scioglie dal centro verso i bordi lasciando dietro di sé un velo bagnato, e la scheda torna com'era. Una volta su due, nella demo, verso il 60% un file è aperto in un'altra app: il vetro ha un piccolo sussulto, la brina si ferma e diventa grigia, il titolo in rosso dice Couldn't move 1 file e il pulsante Retry fa ripartire tutto da dove era. Cancel, premuto a mano, scioglie il ghiaccio fatto fin lì.

Come funziona

Un tempo d'arrivo per ogni cella

Sul vetro c'è una griglia di celle da 4 pixel. Ogni cella ha un valore d'arrivo: la sua distanza dal bordo del rettangolo arrotondato (una distanza con segno) più un rumore liscio a due scale, più un poco al centro, dove sta il numero, che così gela per ultimo. I valori ordinati danno il fronte F per ogni avanzamento: la quota p delle celle sta dietro F, quindi il vetro ghiacciato è proprio l'avanzamento.

Le punte che crescono

I cristalli sono rami con una punta: tronchi che partono dal bordo ogni 20-36 pixel verso l'interno, con un angolo un po' a caso. A ogni passo una punta avanza di 1,8 pixel solo se la cella davanti ha un arrivo minore di F più LEAD; altrimenti aspetta. Muore se esce dal vetro o se entra in una cella di un'altra griglia, da 3 pixel, già presa da un altro cristallo (che non sia suo padre). I tronchi si piegano piano, i rami laterali restano dritti.

Rami a sessanta gradi

Ogni 2,6-5 pixel un ramo può buttare, con probabilità BRANCHING, un figlio a più o meno sessanta gradi dalla sua direzione, a volte due: lunghi una parte di quanto resta al padre, quindi più corti verso la punta, come una felce. I figli dei figli fanno lo stesso, fino alla terza generazione. Dove la velatura è già arrivata e non c'è niente vicino si posano stelle: sei rami a sessanta gradi da un punto.

A pezzi, e solo quello che è nuovo

Ogni punta ha i passi che le concede la sua velocità (GROWTH pixel al secondo), ma tutto il fotogramma ha un tetto di BUDGET millisecondi: se finisce, le punte che restano aspettano il prossimo. I segmenti nuovi si disegnano in un solo tratto per generazione su un canvas che li tiene; il vetro si ricompone solo se qualcosa è cresciuto o un bagliore è vivo. La velatura è un'immagine di una cella per pixel, ingrandita liscia; il bagliore è il canvas dei cristalli rimpicciolito di cinque volte e ridisegnato grande in modo lighter.

La luce, il ghiaccio fitto e il disgelo

Alla fine la velatura si fa fitta e le scritte diventano scure con un alone chiaro; una fascia di luce passa in source-atop, così illumina solo il ghiaccio. Il disgelo è un secondo fronte M che scende dal valore più alto al più basso: una maschera, una cella per pixel, ritaglia i cristalli in destination-in e la velatura, e subito dietro il bordo lascia un velo chiaro che svanisce, l'acqua.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SECONDS`	script.js	`6.5`	Quanto dura l'archiviazione nella demo, in secondi (una vera segue i suoi file).
`FILES`	script.js	`1284`	Quanti file ci sono nella cartella.
`SIZE`	script.js	`38.6`	Quanto pesa la cartella, in gigabyte.
`FAIL_EVERY`	script.js	`2`	Nella demo, un'archiviazione ogni quante si ferma su un file aperto (0 mai).
`FAIL_AT`	script.js	`0.6`	Fin dove arriva l'archiviazione che si ferma, da 0 a 1.
`BRANCHING`	script.js	`0.6`	Quanto spesso i cristalli buttano rami laterali a sessanta gradi: 0,2 radi, 1 fitti.
`LEAD`	script.js	`22`	Quanto le punte dei cristalli corrono avanti alla velatura, in pixel.
`STARS`	script.js	`0.7`	Quante stelle a sei punte si posano nella velatura: 0 nessuna, 1 tante.
`HAZE`	script.js	`0.42`	Quanto è opaca la brina fra i cristalli mentre cresce.
`GLOW`	script.js	`0.5`	Il bagliore freddo intorno ai cristalli.
`GLINTS`	script.js	`1`	I bagliori sulle punte che crescono: 0 niente, 2 tanti.
`GROWTH`	script.js	`150`	Quanto in fretta cresce una punta, in pixel al secondo.
`MELT`	script.js	`1.3`	Quanti secondi ci mette la brina a sciogliersi.
`BUDGET`	script.js	`4`	Quanti millisecondi può spendere un fotogramma a far crescere la brina.

Provali nel Playground

Quando usarla

Per spostare file vecchi in un archivio a freddo (cloud storage, backup, gestione dei media, NAS), per comprimere o congelare un progetto, per la conferma di un'archiviazione in un'app di foto o di documenti, e in generale per un avanzamento dove il risultato è qualcosa che si mette via al freddo.

Sul telefono

La scheda prende la larghezza dello schermo meno 16 pixel per lato (358 a 390): il vetro si rimisura, la griglia si rifà e la brina, se stava crescendo, ricresce subito fino a dove era. Il pulsante è alto 44 e si usa col tocco; la pillola che si gonfia sotto il puntatore c'è solo col mouse. Un nome di file lungo finisce coi puntini.

Con il movimento ridotto

La brina si fa tutta subito, fuori vista, e compare con una dissolvenza che segue l'avanzamento: niente rami che crescono, niente bagliori, niente fascia di luce né sussulto nell'errore. Alla fine il ghiaccio si infittisce con una dissolvenza e compare la spunta; Undo e Cancel lo fanno svanire. Il fiocco non gira e le parole cambiano con una dissolvenza.

Trappole

Le scritte sul vetro avevano un alone scuro che finiva in un rettangolo: il contenitore delle parole che cambiano ha overflow: hidden e tagliava il text-shadow. Dentro il vetro va visibile.
A 100% l'ultima cella aveva il valore del fronte esatto, e la velatura lì restava a metà: il fronte, alla fine, va oltre l'ultimo valore di un bordo morbido intero.
Sul vetro bianco della fine il bagliore dei cristalli faceva macchie chiare: quando il ghiaccio si infittisce il bagliore cala del 65%, e le scritte passano dal bianco con alone scuro al blu scuro con alone chiaro.
Un tronco perfettamente orizzontale sembrava una sbarra spessa: i tronchi si piegano piano (la loro direzione di base fa un piccolo cammino a caso) e negli ultimi 36 pixel si assottigliano.
Ruotare il fiocco SVG con transform-origin in CSS e GSAP insieme lo spostava fuori dal suo posto: GSAP vuole svgOrigin: '16 16'.
Annullando a metà il disgelo partiva dal valore più alto e per mezzo secondo non succedeva niente: parte dal fronte attuale.
Il ciclo di crescita aggiungeva i rami nuovi all'elenco mentre lo scorreva: li fa crescere subito nello stesso giro, ma se il tetto di tempo scade quelli rimasti vanno tenuti tutti per il fotogramma dopo.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 15 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.