Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Il pendolo doppio che disegna
Nello stile minimal, con fisica vera: su una pagina nera un pendolo doppio di due aste sottili, con un piccolo peso vermiglio in fondo che disegna la sua strada con una linea che sfuma. Il moto è caotico e non torna mai uguale; sotto, la parola erratic sente il peso che le passa sopra e la lettera sotto di lui ingrassa e si stringe. Il peso si prende col mouse o col dito e si lascia dove si vuole.
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>Erratic</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>
<!-- the weight at the end of the pendulum can be taken and let go; a click lets it go from its first pose again -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A double pendulum that draws its own path and never swings the same way twice. Drag the weight and let it go.">
<header class="top">
<span class="top__brand">Erratic</span>
<span class="top__note">Generative prints, never the same twice</span>
</header>
<canvas class="trail" data-trail aria-hidden="true"></canvas>
<svg class="rig" data-svg aria-hidden="true">
<path class="mount" data-mount d="" />
<line class="rod" data-rod1 x1="0" y1="0" x2="0" y2="0" />
<line class="rod" data-rod2 x1="0" y1="0" x2="0" y2="0" />
<circle class="joint" data-joint r="3.5" cx="0" cy="0" />
<circle class="joint" data-pivot r="2" cx="0" cy="0" />
<circle class="bob" data-bob r="5.5" cx="0" cy="0" />
</svg>
<!-- the word: every letter gets heavier while the weight swings above it -->
<h1 class="word" data-word>erratic</h1>
<p class="hint" data-hint>Drag the weight and let it go.</p>
<p class="read" data-readout><span data-a1>0°</span> <span data-a2>0°</span></p>
</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.
17 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 «Il pendolo doppio che disegna» da Animorio e adattala al mio sitoCosa fa
Una pagina nera, in alto il nome di uno studio inventato di stampe generative, Erratic. Al centro compare un piccolo attacco tratteggiato e da lì scendono due aste sottili, dritte, con un anello vuoto al gomito e un piccolo peso vermiglio in fondo; sotto sale lettera per lettera la parola erratic. Una mano invisibile solleva il pendolo fin quasi capovolto e lo lascia andare: le due aste girano, si piegano, la seconda fa giri interi attorno al gomito, e il peso lascia una linea vermiglia sottile che si consuma dalla coda in sette secondi, così sulla pagina resta sempre un disegno nuovo, mai lo stesso. Quando il peso passa sopra la parola, la lettera che ha sotto prende peso e si stringe sull’asse della larghezza, e torna leggera quando lui se ne va. In basso a destra si leggono gli angoli delle due aste. Dopo un poco la mano riprende il pendolo, lo riporta alla posa di partenza e lo lascia di nuovo. Il peso si prende col mouse o col dito: le aste lo seguono senza mai ribaltare il gomito, e lasciato parte con la velocità della mano. Un clic lo fa ripartire dalla posa di partenza.
Come funziona
Le equazioni vere
Due masse uguali su due aste uguali e senza peso: le accelerazioni angolari sono quelle classiche del pendolo doppio (ricavate con le equazioni di Lagrange), con la gravità divisa per la lunghezza delle aste scelta da PERIOD, il periodo di una piccola oscillazione. Si integrano con Runge-Kutta del quarto ordine a passi fissi di un seicentesimo di secondo dentro gsap.ticker, e il tempo di ogni fotogramma non supera un trentesimo di secondo. Un filo d’aria (AIR) toglie un poco di velocità.
Una linea che si consuma
Ogni due passi la posizione del peso entra in una lista con il suo tempo; i punti più vecchi di TRAIL secondi escono. La linea si disegna su una canvas in ventiquattro tratti, dal più vecchio al più nuovo, ognuno con la sua trasparenza: la coda sfuma, la testa è piena. Con un punto ogni due passi la linea resta morbida anche quando il peso frusta attorno al gomito.
La mano: sollevare e lasciare
Una timeline GSAP porta gli angoli dalla posa del momento a quella di partenza (START), per la strada più corta qualunque giro abbiano fatto le aste, e poi apre la mano con velocità zero. Ogni volta il pendolo riparte esattamente dallo stesso punto, e un gsap.delayedCall lo riprende dopo RUN secondi. Mentre una mano lo tiene, gli angoli inseguono il bersaglio e la loro velocità è quella che il pendolo porta con sé quando viene lasciato.
Prendere il peso
Due aste e un punto: la cinematica inversa trova i due angoli che portano il peso sotto il dito, con il gomito dalla parte dove già si trova, così le aste non si ribaltano mai. Il punto è tenuto entro la portata delle due aste. Lasciato, il pendolo parte con la velocità della mano, contenuta entro un limite.
La parola che sente il peso
Ogni lettera di erratic misura la distanza in orizzontale dal peso: con una campana di Gauss larga mezza asta, la lettera più vicina prende peso (fino a 700 su wght) e si stringe (wdth) sul carattere variabile Instrument Sans, inseguendo il valore con un poco di ritardo, così il passaggio si vede come un’onda che scorre sulla parola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PERIOD | script.js | 1.7 | Quanti secondi dura una piccola oscillazione di un’asta sola: di più è più lento e sognante. |
START | script.js | [118, 166] | Gli angoli delle due aste quando la mano le lascia, in gradi dalla verticale in giù. Più vicini a 180, più il disegno è selvaggio. |
RUN | script.js | 16 | Quanti secondi il pendolo oscilla da solo prima che la mano lo riprenda. |
TRAIL | script.js | 7 | Quanti secondi di strada tiene la linea prima di sfumare. |
AIR | script.js | 0.04 | Quanto l’aria rallenta il pendolo: 0 non si ferma mai, 0.3 si calma prima che la mano lo riprenda. |
--accent | style.css | #ff4a2b | Il colore del peso e della linea che disegna. |
--weight | style.css | 400 | Il peso della parola dove il pendolo è lontano, da 400 a 700. |
Quando usarla
Per l’apertura di uno studio di arte generativa, di un artista o di un designer che lavora col codice, per una pagina 404 che non è mai uguale, per la copertina di un corso di fisica o di un articolo sul caos. Funziona con qualunque parola corta sotto il pendolo, anche il nome di un marchio.
Sul telefono
La stessa fisica, con le aste misurate sulla larghezza perché il disegno stia nello schermo; la parola sale un poco sopra il fondo. Il peso si prende col dito, con un’area più larga.
Con il movimento ridotto
Il pendolo non si muove: pende dritto, e intorno c’è già il disegno di nove secondi di oscillazione, calcolato in silenzio e tracciato più tenue. Un clic lo cambia con un altro disegno, partito da una posa appena diversa, in dissolvenza.
Trappole
- Il moto è caotico: con un fotogramma più lungo o più corto la strada cambia dopo pochi secondi. Per questo la mano lascia il pendolo sempre da fermo e azzera l’orologio della fisica: il giro registrato è sempre lo stesso, ma dura circa diciotto secondi e lo script del video non lo vede ricominciare; il video della scheda vuole una durata fissa.
- Con una sola posizione a fotogramma la linea farebbe spigoli dove il peso frusta attorno al gomito (a sessanta fotogrammi al secondo anche trenta pixel fra un punto e l’altro): per questo entra un punto ogni due passi della fisica.
- Per due aste e un punto la cinematica inversa ha due soluzioni, col gomito da una parte o dall’altra: scegliendo sempre la stessa il gomito scatterebbe di colpo appena preso il peso. Si sceglie quella dalla parte dove il gomito già si trova.
- A dodici pixel la theta greca si leggeva come uno zero (θ1 sembrava 01): gli angoli ora si chiamano upper e lower.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 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.
