Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Le parole in bilico
Nello stile minimal: due parole ai capi di un'asse sottile in equilibrio su un fulcro, e il peso del carattere è il peso vero, misurato sull'inchiostro delle lettere. Un clic dà il peso a una parola: diventa nera e grassa, l'asse si inclina dalla sua parte con una molla e la parola rimasta leggera, in alto, scivola un poco verso il centro.
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>This or that</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- two words on a thin beam balanced on a fulcrum: the weight of the type is the weight on the scale -->
<main class="stage" data-stage>
<div class="balance" data-balance>
<svg class="lines" data-lines aria-hidden="true">
<path class="fulcrum" data-fulcrum d="" />
<path class="plinth" data-plinth d="" />
<path class="dial" data-dial d="" />
<path class="ticks" data-ticks d="" />
<path class="beam" data-beam d="" />
<path class="stop" data-stop-l d="" />
<path class="stop" data-stop-r d="" />
<path class="needle" data-needle d="" />
<circle class="pin" data-pin cx="0" cy="0" r="2.6" />
</svg>
<button class="word" type="button" data-word="left" data-autoclic aria-label="Give the weight to this">
<span class="word__box" data-box><span class="word__ink" data-ink>this</span></span>
<span class="word__cap" data-cap>wght <b data-num>530</b></span>
</button>
<button class="word" type="button" data-word="right" data-autoclic aria-label="Give the weight to that">
<span class="word__box" data-box><span class="word__ink" data-ink>that</span></span>
<span class="word__cap" data-cap>wght <b data-num>530</b></span>
</button>
</div>
<p class="hint" data-hint>Click a word to give it the weight.</p>
<p class="read" data-readout><span class="read__label">Tilt</span> <b class="read__value" data-read>0.0°</b></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.
21 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 «Le parole in bilico» da Animorio e adattala al mio sitoCosa fa
Una pagina bianca calda e, al centro, una bilancia disegnata a linee sottili. Prima si traccia la base, poi il fulcro, un triangolo stretto; sopra la punta l'asse si allunga dal centro verso i due capi, compaiono i due fermi alle estremità, le tacche sotto l'asse come su un righello e, sopra il perno, un piccolo quadrante con un ago vermiglio. Dall'alto cade this e si posa sul capo sinistro: l'asse prende il colpo e si inclina, le lettere si schiacciano una dopo l'altra. Poi cade that sul capo destro e l'asse, dopo qualche oscillazione, torna in piano. Sotto ogni parola una piccola quota dice il suo peso, wght 530. Cliccando una parola le si dà il peso: in un attimo diventa grassa (wght 860, con un piccolo sobbalzo oltre e il ritorno), si schiaccia come chi si carica qualcosa sulle spalle e le lettere sentono il colpo una dopo l'altra; l'altra si alleggerisce fino a wght 200, diventa sottile e quasi respira. La massa di ogni parola è l'inchiostro delle sue lettere a quel peso, quindi l'asse si inclina davvero: va oltre, torna indietro e si assesta su una molla, l'ago segna i gradi sul quadrante e in basso a destra si legge l'inclinazione. Nel colpo più forte la parola leggera, in alto, perde la presa e scivola un poco verso il centro sopra le tacche; quando sarà lei ad avere il peso, l'asse andrà dalla sua parte e lei tornerà giù fino al fermo, che cede appena sotto l'urto. Cliccando di nuovo la parola che ha il peso, le due parole tornano uguali. Con il mouse sopra una parola, la parola ingrassa appena e l'asse pende un pelo dalla sua parte, come un dito sul piatto.
Come funziona
La massa è l'inchiostro
All'avvio ogni parola si disegna su una canvas nascosta ai nove pesi del carattere variabile (da 100 a 900) e si contano i pixel pieni: è la sua massa a quel peso. Fra un peso e l'altro la massa si legge interpolando, così mentre la parola ingrassa la bilancia sente il peso crescere fotogramma dopo fotogramma. Con una tara le due parole pesano uguale allo stesso peso, anche se una ha più lettere o lettere più larghe: la bilancia vuota parte in piano.
Una bilancia con la sua molla
L'asse è un corpo che gira sul perno, mosso a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. Le due parole gli danno una coppia (massa per distanza dal perno) e una molla di richiamo lo riporta verso il piano, come il peso basso di una bilancia vera: così l'inclinazione è proporzionale alla differenza dei pesi invece di finire sempre a terra. La rigidezza viene da TILT (quanti gradi con una parola pesante contro una leggera), la velocità da SWING e lo smorzamento da DAMPING; con poco smorzamento l'asse va oltre e torna, ed è lì che si vede la fisica.
La presa delle parole
Ogni parola ha la sua posizione sull'asse e la sua velocità. Ferma, resta dov'è finché la pendenza sotto di lei (l'angolo dell'asse più la piega del braccio) non supera l'angolo d'attrito, cioè GRIP volte l'inclinazione normale: succede solo nel colpo più forte di un'oscillazione. Una volta partita tiene un poco meno, e scivola finché l'oscillazione non torna sotto. Le due parole stanno sulla stessa asse e sentono la stessa oscillazione: quello che la leggera perde scivolando verso il centro lo ritrova quando sarà la pesante e scenderà fino al suo fermo.
L'asse che si piega e i fermi
L'asse non è una riga dritta: ogni braccio si piega un poco sotto la sua parola, come una mensola caricata in punta (la curva di una trave a sbalzo), e la piega ha la sua molla veloce, quindi vibra quando una parola atterra. L'asse è disegnata come una spezzata di trenta punti, e ogni parola si posa sul punto giusto con l'inclinazione locale. Quando una parola che scivola sbatte contro il fermo, il fermo si piega e torna con elastic.out e le lettere si schiacciano dal lato dell'urto.
Il peso del carattere come gesto
Il clic fa un tween GSAP sul peso della parola, con elastic.out: il carattere passa per un peso un po' più alto e torna, e intanto scaleX e scaleY danno lo schiacciamento e le lettere si abbassano e risalgono sfalsate. Il peso entra nella pagina come font-weight, solo quando cambia di un'unità. Con il movimento ridotto niente si sposta: la bilancia sparisce in dissolvenza, i pesi e l'inclinazione si mettono al loro posto e la bilancia ricompare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEFT_WORD | script.js | 'this' | La parola sul capo sinistro dell'asse (fino a 14 lettere: le parole lunghe si rimpiccioliscono per starci). |
RIGHT_WORD | script.js | 'that' | La parola sul capo destro dell'asse. |
LIGHT | script.js | 200 | Il peso del carattere della parola leggera, da 100 a 900. |
HEAVY | script.js | 860 | Il peso del carattere della parola che ha il peso: più è lontano da LIGHT, più è netta la differenza fra le due parole. |
TILT | script.js | 5 | Di quanti gradi si inclina l'asse quando una parola pesante sta contro una leggera. |
SWING | script.js | 0.9 | Quanto è veloce l'oscillazione dell'asse, in oscillazioni al secondo: 0.4 è una bilancia grande e lenta, 2 un bilancino nervoso. |
DAMPING | script.js | 0.22 | Quanto presto si spegne l'oscillazione: 0.1 dondola a lungo (e le parole scivolano di più), 0.4 si assesta quasi subito e le parole non scivolano. |
GRIP | script.js | 1.25 | Quanto tengono le parole: la pendenza che le fa scivolare, in volte l'inclinazione normale. Più basso scivolano di più, più alto restano ferme. |
Quando usarla
Per mettere due cose a confronto con un gesto: un titolo che chiede di scegliere (questo o quello, prima o dopo, mensile o annuale), l'apertura del portfolio di chi disegna caratteri, la pagina di presentazione di un carattere variabile, un momento di gioco in una landing page.
Sul telefono
La stessa bilancia con le misure adattate: le braccia occupano quasi tutta la larghezza, le parole sono più grandi rispetto alle braccia e la fisica è la stessa, in proporzione. Un tocco su una parola le dà il peso; il dito sopra non fa pendere l'asse, perché sul telefono il passaggio non esiste.
Con il movimento ridotto
Niente si sposta: la bilancia compare in dissolvenza già in piano con le parole al loro posto. Il clic la fa sparire in dissolvenza e la fa ricomparire con i pesi nuovi e l'asse già inclinata dove si ferma.
Trappole
- Con un'asse appoggiata sul fulcro e basta, una differenza di peso qualsiasi la manda sempre a terra: per un'inclinazione proporzionale serve la molla di richiamo, come il peso sotto il perno di una bilancia vera.
- Con l'attrito di chi scivola molto più basso di quello di chi sta fermo, la parola leggera non si fermava più: scivolando verso il centro toglieva peso al suo lato, l'asse si inclinava di più e lei scivolava ancora, fino in fondo. L'attrito in movimento è appena sotto quello da ferma, così la parola si ferma appena l'oscillazione torna sotto.
- Con la spinta in più data dall'accelerazione dell'asse (una parola su un capo che viene lanciato in alto e frenato preme meno) la leggera scivolava molto e la pesante non tornava mai al fermo: dopo qualche clic tutte e due erano al centro. Restano la pendenza e la spinta verso fuori dell'oscillazione, che sono uguali per tutte e due.
- Due parole diverse allo stesso peso non hanno lo stesso inchiostro (that ne ha più di this), e la bilancia vuota partiva storta di mezzo grado: la tara pareggia le due parole al peso di mezzo.
- Le parole partivano da metà altezza della pagina sopra l'asse, e nel primo fotogramma si vedevano tagliate in cima allo schermo: ora partono fuori dalla pagina, sopra il bordo, e restano diritte finché non toccano l'asse.
- Il video della scheda si ferma quando l'immagine resta uguale per un secondo senza animazioni GSAP in programma: finché la fisica è sveglia c'è sempre un gsap.delayedCall in attesa, e si addormenta solo quando l'asse è ferma al suo equilibrio.
Librerie
GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
