Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La curva che riempie il quadrato
Un caricamento nello stile minimal: una linea sottile disegna una U dentro un quadrato, poi ogni curva si apre in una U più piccola, piega dopo piega, finché la linea passa per tutte le 1.024 caselle senza incrociarsi mai (la curva di Hilbert). Sotto, il numero delle caselle si stringe man mano che si allunga; alla fine una seconda linea blu elettrico corre dentro tutta la curva e conta i file impacchettati.
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 line that fills the square</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Tessel is packing your files. Click to start again.">
<!-- one line folds itself into the square, corner by corner, then a second line runs through it in the accent -->
<svg class="scene" data-scene aria-hidden="true">
<path class="frame" data-frame d="" pathLength="1" />
<path class="marks" data-marks d="" />
<path class="line" data-line d="" />
<path class="pack" data-pack d="" pathLength="1" />
</svg>
<div class="caption" data-caption>
<span class="caption__name" data-name>Tessel</span>
<span class="caption__count">
<span class="caption__num" data-num>4</span>
<span class="caption__label" data-label>cells</span>
</span>
</div>
</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 «La curva che riempie il quadrato» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo si disegnano un quadrato grigio sottilissimo e i suoi quattro segni d’angolo; dentro, una linea nera di un pixel e mezzo traccia una U capovolta che tocca le quattro caselle del quadrato. Sotto, a sinistra, il nome dell’app inventata, Tessel; a destra un numero grande, 4, e la parola cells. Poi la linea si piega: ogni angolo della U si apre in una U più piccola, e la piega corre lungo la linea dal suo inizio, in basso a sinistra, alla fine, in basso a destra; ogni tratto arriva un capello oltre il suo posto e torna. Le pieghe si ripetono quattro volte (16, 64, 256, 1.024 caselle) e la linea si fa un po’ più sottile a ogni giro, senza incrociarsi mai. Il numero sotto conta le caselle mentre la linea si piega, prende peso e si stringe sull’asse della larghezza a ogni cifra in più, così occupa sempre lo stesso spazio. Quando il quadrato è pieno, il numero sparisce e torna blu elettrico da zero con la parola packed, mentre una seconda linea blu percorre tutta la curva e la ricopre casella per casella fino a 1.024. Dopo un respiro la linea blu se ne va dalla coda, la curva si ripiega all’indietro fino alla prima U e si cancella; poi tutto ricomincia. Un clic lo fa ripartire da capo.
Come funziona
La curva, una volta sola
La curva di Hilbert si calcola una volta sola all’ordine più fine con la funzione classica d2xy, che trasforma l’indice di un punto nella sua casella. Gli ordini più grossi sono la stessa lista presa un punto ogni 4, 16, 64…, con le coordinate divise per 2, 4, 8: la curva di Hilbert visita le sottocaselle di ogni casella una dopo l’altra, quindi i gruppi di quattro punti consecutivi hanno sempre lo stesso genitore.
Una piega è un punto che scivola
Per passare dall’ordine k al k+1 ogni punto nuovo parte dal centro della casella del suo genitore (il punto j>>2 dell’ordine prima) e scivola al centro della sua. Il progresso di ogni punto è sfasato lungo la linea (WAVE), così la piega corre dall’inizio alla fine, e passa per back.out(SPRING): ogni angolo va un capello oltre e torna.
Il numero che tiene il suo spazio
Il contatore è Archivo variabile: GSAP anima il numero con snap agli interi, il peso e una variabile --w legata a font-stretch. La larghezza scende da 125 a 76 man mano che le cifre passano da una a quattro, quindi il numero non spinge mai la parola accanto.
La linea che impacchetta
La linea blu è una copia del tracciato finale con pathLength=1: la sua stroke-dasharray è «0 coda testa−coda 2», così basta animare due numeri per farla entrare dall’inizio e uscire dalla coda. Il conteggio dei file la segue con la stessa durata.
Giro, clic e movimento ridotto
Tutto è una timeline sola in pausa che a onComplete rimette lo stato a zero e riparte: il video dell’anteprima vede il giro intero. Il tracciato si ricostruisce solo quando cambiano l’ordine, la piega o la misura, e al resize si ricalcola il quadrato in pixel anche a metà piega. Con il movimento ridotto il quadrato pieno, blu, con 1.024 packed, compare in dissolvenza e resta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Tessel' | Il nome dell’app, sotto il quadrato a sinistra. |
ORDER | script.js | 5 | Quante volte la linea si piega (da 3 a 6): 5 sono 1.024 caselle, 6 sono 4.096. |
DRAW | script.js | 1.1 | I secondi in cui si disegna la prima U. |
FOLD | script.js | 1.05 | I secondi di ogni piega. |
WAVE | script.js | 0.55 | Quanto la piega corre lungo la linea: 0 = tutti gli angoli insieme. |
SPRING | script.js | 1.4 | Quanto ogni angolo va oltre il suo posto prima di fermarsi: 0 = si ferma secco. |
PACK | script.js | 2.6 | I secondi in cui la linea blu percorre tutta la curva. |
HOLD | script.js | 1.6 | I secondi in cui il quadrato pieno resta fermo prima di ripiegarsi. |
Quando usarla
Come caricamento di un’app che archivia, ordina o sincronizza file, di un servizio di backup o di un magazzino; come attesa durante un’importazione lunga; come illustrazione di una pagina che spiega come un sistema mette in ordine le cose senza lasciare buchi.
Sul telefono
Le stesse animazioni con le misure adattate: il quadrato prende quasi tutta la larghezza, la linea resta di almeno un pixel anche con le caselle più piccole e il nome e il numero restano sotto, allineati ai bordi del quadrato.
Con il movimento ridotto
Niente si muove: il quadrato pieno, con la curva blu e 1.024 packed sotto, compare in dissolvenza e resta.
Trappole
- Gli ordini grossi non vanno calcolati ognuno con la sua d2xy: ordini diversi possono uscire ruotati o specchiati l’uno rispetto all’altro, e allora il genitore j>>2 non starebbe sotto i suoi quattro figli e la piega farebbe saltare i tratti. Ricavandoli tutti da quello fine, un punto ogni 4^n, il genitore è sempre giusto.
- Il blu del numero non si mette con gsap.set(color: 'var(--accent)'): GSAP prova a interpolare il colore e una variabile CSS non è un colore. Lo fa una classe.
- Con l’ordine 6 sono 4.096 punti: il tracciato si ricostruisce solo quando qualcosa cambia davvero (una chiave fatta di ordine, piega e misura), così nelle pause non si ricalcola niente.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
