Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
L’armonografo del caricamento
La generazione di un motivo unico per una carta da regalo, fatta come un armonografo visto dall’alto: un tavolo di noce, un foglio su un piatto che oscilla col suo pendolo e un pennino in cima a un lungo braccio appoggiato a un secondo pendolo, che si vede pendere nel buco del tavolo. Premuto Generate pattern i pendoli vengono tirati indietro e lasciati andare: le due oscillazioni smorzate disegnano una figura che gira e si chiude verso il centro, con l’inchiostro più sottile dove il pennino corre e più pieno dove rallenta. Il disegno è l’avanzamento. Alla fine il pennino si alza e torna indietro, e un’onda di colore corre lungo la linea: Pattern ready. Ogni volta una figura diversa.
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, viewport-fit=cover">
<title>The harmonograph loader</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">
<!-- the harmonograph loader: a one-of-a-kind gift wrap pattern being generated, shown as a harmonograph seen from
above. A walnut table with a sheet of paper on a swinging plate and a pen at the end of a long arm; the arm is
hinged on a brass post and rests on the top of a pendulum that hangs through a hole in the table. Pressed, both
pendulums are pulled back and let go, the pen comes down and the two damped swings together draw a figure that
closes in towards the middle. The drawing is the progress. At the end the pen lifts and the figure takes its
colours. The table, the pendulums and the ink are drawn by script.js -->
<section class="harmo" aria-label="Pattern generator" data-harmo>
<!-- three layers: the table, the hole and the pendulum in it; the plate and the paper, with the ink; the arm,
the post and the pen -->
<div class="harmo__scene" role="progressbar" aria-label="Pattern generation" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to generate" data-scene>
<svg class="harmo__art" viewBox="0 0 380 270" aria-hidden="true" data-art="back"></svg>
<div class="harmo__plate" aria-hidden="true" data-plate>
<canvas class="harmo__paper" data-paper></canvas>
</div>
<svg class="harmo__art" viewBox="0 0 380 270" aria-hidden="true" data-art="front"></svg>
</div>
<p class="harmo__status" aria-hidden="true">
<svg class="harmo__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
<span class="harmo__swap" data-status>Ready to generate</span>
<span class="harmo__pct" data-pct></span>
</p>
<div class="harmo__buttons">
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Generate pattern</span></button>
<button class="pill is-quiet" type="button" hidden data-again><span class="pill__label">New pattern</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.
62 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 «L’armonografo del caricamento» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un armonografo di noce visto dall’alto, con la luce di una lampada che arriva da in alto a sinistra e un filetto chiaro intarsiato lungo il bordo del tavolo. A destra c’è un piatto scuro con sopra un foglio color crema; in alto a sinistra un buco cerchiato d’ottone, e dentro, giù nel buio, il peso d’ottone di un pendolo con la sua asta. Un braccio d’ebano parte da un perno d’ottone nell’angolo, si appoggia sul giunto in cima a quel pendolo e porta il pennino, fermo sul bordo del foglio. Sotto ci sono la riga Ready to generate e il pulsante Generate pattern; puntandolo, il pendolo riceve una piccola spinta e il braccio ondeggia un attimo. Premuto, una mano invisibile tira indietro i due pendoli (quello del braccio e quello del piatto, che sta sotto al foglio): il pennino scorre lungo il braccio fino al foglio e si posa, lasciando una goccia d’inchiostro. Poi i pendoli partono: il piatto col foglio gira su un’ellisse, il pennino su un’altra, a una frequenza diversa, e il peso nel buco oscilla dalla parte opposta. Il pennino disegna in inchiostro blu una figura di Lissajous che ruota e si stringe a spirale verso il centro man mano che le oscillazioni si spengono; la linea è sottile dove il pennino corre, più piena dove gira o rallenta, e si scurisce dove passa sopra a sé stessa. La riga dice Drawing your pattern… con la percentuale, che è quanta parte della figura è disegnata. Alla fine il pennino si alza (l’ombra si allontana), torna indietro lungo il braccio con un piccolo rimbalzo, un freno ferma i pendoli e un’onda di colore corre lungo la linea dall’esterno al centro: tre colori fra cinque, ogni volta diversi. La riga diventa Pattern ready con una spunta verde che si disegna; accanto a Download compare New pattern, che toglie il foglio con un gesto e ne posa uno nuovo. La figura dopo ha un altro rapporto fra i pendoli, altre fasi, altre ellissi e altri colori: una stella, un fiore, una spirale, un nodo.
Come funziona
Due pendoli, due ellissi
Un pendolo libero di oscillare in ogni direzione, per piccole oscillazioni, muove la sua cima sul tavolo come una molla in due dimensioni smorzata: x'' = −ω²x − 2γx', lo stesso per y. Ce ne sono due: A porta il braccio (il suo spostamento è quello del pennino), B porta il piatto col foglio. Il segno lasciato sul foglio è la differenza A − B. Si integrano con Eulero semi-implicito (prima la velocità, poi la posizione), che su migliaia di passi non regala né toglie energia: a ogni fotogramma il tempo dei pendoli si divide in passi di 1/260 dell’oscillazione più veloce.
Una figura nuova a ogni pressione
Il rapporto fra le frequenze si sceglie a caso in RATIOS (2:3, 1:2, 3:4…) e si stona di poco (DETUNE), così la figura ruota piano mentre si chiude; anche quale dei due pendoli è il lento cambia. Ognuno parte su un’ellisse con larghezza, schiacciamento, inclinazione, fase e verso a caso: posizione e velocità iniziali vengono dalla formula dell’ellisse. Lo smorzamento è −ln(FADE)/CYCLES, quindi alla fine del disegno resta FADE dell’ampiezza; il pennino prende fra il 58 e il 70% della figura, il foglio il resto, e insieme non passano SIZE.
Il disegno è l’avanzamento
Il tempo dei pendoli insegue l’avanzamento: il bersaglio è p × CYCLES, e ogni fotogramma ne recupera una parte con 1 − e^(−7·dt), così il pennino accelera e rallenta senza scatti quando il lavoro va a tratti. La percentuale è il tempo disegnato diviso per quello totale. Il braccio è una leva: incernierato sul perno, appoggiato al pendolo a 0,3 della sua lunghezza, porta il pennino 3,3 volte più lontano della cima del pendolo; il peso, molto sotto il perno, va dalla parte opposta.
L’inchiostro a pezzi
A ogni passo il punto si salta se è a meno di 0,3 unità dal precedente; per gli altri si salvano la posizione sul foglio, la normale e uno spessore che scende con la velocità del pennino, e^(−4,2·v), smussato fra un punto e il successivo. A ogni fotogramma i punti nuovi diventano una fascia: i due bordi, uno avanti e uno indietro, riempiti in una volta su un canvas che contiene già la carta, in moltiplicazione e al 74%: dove la linea ripassa sopra a sé stessa l’inchiostro si scurisce, come su carta vera.
Il colore che corre
Alla fine il pennino si alza (l’ombra si allarga e si stacca), torna indietro lungo il braccio con un elastico e il freno moltiplica lo smorzamento per sette. Poi il foglio si ridipinge a pezzi di 40 punti: ognuno passa dall’inchiostro al suo colore quando il fronte di un’onda, che va da 0 a 1 in un secondo e mezzo, raggiunge la sua posizione lungo la linea. Il colore viene da tre dei cinque --tone di :root, mescolati uno nell’altro dall’esterno al centro, e il punto d’inizio cambia ogni volta.
Chi non vede e la demo
La scena è un role=progressbar con aria-valuenow e aria-valuetext aggiornati al massimo ogni 0,6 secondi, aria-busy mentre lavora e una riga aria-live per l’inizio, la fine e il download. Il pulsante resta lo stesso elemento in tutti gli stati e New pattern, sparendo, gli ripassa lo stato attivo. I clic da script (detail 0, quelli dell’anteprima della libreria) non scaricano mai: dopo 2,5 secondi di Pattern ready preparano un foglio nuovo. Quando niente si muove il ciclo non ridisegna niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 5.5 | Quanto dura il disegno della demo, in secondi, senza i pendoli tirati indietro all’inizio e il colore alla fine (uno vero segue il lavoro del server). |
STEPS | script.js | [[0.15, 1], [0.24, 0.8], [0.55, 1.1], …] | L’avanzamento a tratti: per ogni passo fin dove arriva (da 0 a 1) e quanto pesa sul tempo. I tratti brevi sono quelli in cui il pennino rallenta; un passo che non va più avanti del precedente è una pausa. |
JITTER | script.js | 0.25 | Quanto cambiano i pesi dei passi da una volta all’altra: 0 sempre uguali. La durata resta SECONDS. |
CYCLES | script.js | 20 | Quante oscillazioni fa il pendolo lento durante il disegno: più sono, più giri ha la figura e più fitta è. |
FADE | script.js | 0.24 | Quanto resta dell’ampiezza alla fine del disegno: più basso, la spirale si chiude di più verso il centro. |
RATIOS | script.js | [[2, 3], [1, 2], [3, 4], [1, 3], [3, 5], [2, 5]] | I rapporti fra le frequenze dei due pendoli: a ogni figura se ne sceglie uno a caso. Danno la forma: 1:2 un otto o un cuore, 2:3 un fiore a tre petali, 2:5 una stella. |
DETUNE | script.js | 0.012 | Quanto i pendoli sono fuori dal rapporto esatto: con 0 la figura si chiude su sé stessa, con un po’ ruota mentre si stringe. |
SIZE | script.js | 78 | Il raggio più grande della figura, in unità del disegno (la carta è larga 172, il tavolo 380). |
INK | script.js | [0.5, 1.9] | Lo spessore dell’inchiostro quando il pennino corre e quando si ferma, in unità del disegno. |
LABELS | script.js | { busy: 'Generating…', done: 'Download', saved: 'Downloaded' } | Le scritte del pulsante mentre lavora, alla fine e dopo lo scaricamento; quella a riposo, Generate pattern, si cambia in index.html. |
WORDS | script.js | { busy: 'Drawing your pattern…', done: 'Pattern ready' } | La riga sotto il tavolo mentre lavora (seguita dalla percentuale) e alla fine; quella a riposo, Ready to generate, si cambia in index.html. |
Quando usarla
Per un’attesa di qualche secondo che finisce con qualcosa di unico, fatto per chi aspetta: un motivo generativo per una carta da regalo o un tessuto, un avatar, una copertina, un biglietto d’auguri, una stampa d’arte su richiesta. Il disegno che si chiude dice a che punto si è anche senza leggere il numero, e la figura finale è diversa ogni volta come il risultato. Va bene in un prodotto con un tono artigianale, da laboratorio o da negozio di carta; per un’attesa brevissima o un lavoro senza un risultato da guardare è troppo.
Sul telefono
Il componente è largo 380 pixel e sul telefono prende la larghezza dello schermo meno 16 pixel per lato (358 a 390): tutto il tavolo scala insieme, il disegno è vettoriale e il foglio è un canvas dipinto alla densità vera dello schermo (fino a due volte, con un quarto in più di margine), e a ogni cambio di misura si ridipinge da capo coi punti salvati, quindi la figura resta nitida. I pulsanti sono pillole alte 44: col dito si schiacciano e rimbalzano; la pillola che si gonfia, la scritta che si allarga e la spinta al pendolo al passaggio ci sono solo col mouse (o con la tastiera, per la spinta).
Con il movimento ridotto
I pendoli, il piatto, il braccio e il pennino restano fermi (il pennino al bordo del foglio) e niente spinta al passaggio. La figura si disegna lo stesso, insieme alla percentuale, perché è lei a dire a che punto si è: la linea compare lungo il suo percorso senza niente che si muova. Alla fine il colore entra con una dissolvenza su tutta la figura invece dell’onda, il foglio nuovo arriva con una dissolvenza, le parole cambiano con una dissolvenza e la spunta compare senza disegnarsi.
Trappole
- Con le ellissi molto schiacciate e allineate la figura era una striscia piatta al centro del foglio: lo schiacciamento ora va da 0,5 a 1 e le due ampiezze insieme arrivano a SIZE, così ogni figura riempie il foglio.
- Alla fine il pennino stava proprio sopra il centro, la parte più bella e più fitta della figura: ora, alzato, torna indietro lungo il braccio fino al bordo del foglio, e ci aspetta anche a riposo.
- Dove la velocità relativa dei due pendoli si annulla a ogni giro l’inchiostro, che si allarga quando il pennino rallenta, faceva una macchia scura a cuneo: lo spessore massimo è sceso a 1,9 unità, cala più in fretta con la velocità e l’inchiostro si moltiplica al 74%.
- Con FADE basso la spirale finiva in un grumo nero al centro: 0,24 lascia aperto il cuore della figura.
- Ridisegnare il foglio solo mentre GSAP anima il colore perdeva l’ultimo fotogramma (il tween è già finito quando il ciclo lo chiede): ora il foglio si ridipinge ogni volta che il fronte del colore è diverso da quello dipinto.
- La goccia dove il pennino tocca la carta restava blu dopo che la linea aveva preso colore: anche lei segue il fronte.
- L’anteprima della libreria clicca il pulsante segnato ogni 2,8 secondi, e appena finito avrebbe premuto Download: i clic da script (detail 0) non scaricano mai e, dopo 2,5 secondi di Pattern ready, preparano un foglio nuovo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 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.
