La bilancia delle parole

Fisica, TestoGSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una bilancia a due piatti disegnata con linee sottili e sei parole corte, ognuna in un peso diverso dello stesso carattere variabile. Più la parola è nera, più pesa. Cliccata vola sul piatto più leggero, trascinata va dove la porti; il giogo è un pendolo smorzato vero, s'inclina, oscilla e si assesta, e quando i due lati pesano uguale l'ago si ferma sullo zero e si accende.

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">
  <title>Weigh your words</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a two-pan balance drawn in hairlines: the words weigh what their type weighs, and the needle lights up on zero
       when the two sides are even. The lines are an SVG redrawn by the script at every frame. -->
  <main class="stage" data-stage>
    <svg class="lines" data-lines aria-hidden="true">
      <path class="guide" data-guide d="" />
      <path class="hair" data-base d="" />
      <path class="hair" data-post d="" />
      <path class="hair" data-ticks d="" />
      <path class="zero" data-zero d="" />
      <path class="needle" data-needle d="" />
      <path class="hair" data-strings-l d="" />
      <path class="hair" data-strings-r d="" />
      <path class="pan" data-pan-l d="" />
      <path class="pan" data-pan-r d="" />
      <path class="beam" data-beam d="" />
      <path class="knife" data-knife d="" />
    </svg>

    <span class="total" data-total-l aria-hidden="true">0</span>
    <span class="total" data-total-r aria-hidden="true">0</span>

    <div class="tray" data-tray></div>

    <p class="hint" data-hint>Click a word to weigh it, or drag it onto a pan.</p>
    <p class="read" aria-live="polite"><span class="read__label" data-read-label>Scale</span> <span class="read__clip"><b class="read__value" data-read>Empty</b></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.

28 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 bilancia delle parole» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca calda la bilancia si disegna da sola: prima la base e la colonna dal basso, poi il coltello del fulcro, il giogo che cresce dal centro verso le punte, l'ago che sale e le tacche della scala che si aprono dallo zero verso i lati, infine i fili che scendono e i due piatti. Il giogo nasce un po' storto e, appena è tutto al suo posto, viene lasciato andare: oscilla e si mette in piano. Sotto salgono una dopo l'altra sei parole, lead, stone, paper, silk, bread e salt, ognuna nel suo peso del carattere, da 200 a 900, con il numero piccolo sotto. Il peso del carattere è il peso della parola. Cliccata, una parola si accuccia, parte stringendosi sull'asse della larghezza, fa un arco e scende dritta sul piatto più leggero; tocca, si schiaccia e torna con un elastico, il piatto si piega di un pixel, le parole sotto sentono il colpo e il giogo s'inclina quanto vuole la differenza, con la sua oscillazione e un piccolo overshoot. I piatti dondolano appesi ai fili, ognuno come un pendolo, e sotto ognuno il totale conta fino al peso nuovo. Le parole si impilano strette, una sull'altra; cliccata di nuovo, una parola torna al suo posto e quelle sopra cadono giù di una riga. Trascinata, la parola si porta dove si vuole e il piatto su cui sta per cadere si fa più spesso. Quando i due lati pesano uguale e il giogo si ferma in piano, l'ago si accende nel vermiglio, la tacca dello zero si allunga e in basso a destra compare Even.

Come funziona

Il peso è il peso del carattere

Ogni parola è un pulsante con il suo font-weight, da 100 a 900, e pesa quel numero diviso cento. Il carattere è Roboto Flex, che ha l'asse del peso da 100 a 1000 e quello della larghezza da 25 a 151: il peso resta fisso perché è l'identità della parola, la larghezza invece si muove (si stringe in volo, si allarga nello schiacciamento). Per impilarle strette, l'altezza vera dell'inchiostro di ogni parola si misura su una canvas con measureText (actualBoundingBoxAscent e Descent), nello stesso peso: la scatola della riga lascerebbe dei buchi.

Il giogo è un pendolo smorzato

Il giogo ha un angolo e una velocità, mossi a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. La differenza fra i due piatti spinge con il suo braccio (cos θ), il baricentro del giogo, che sta sotto il fulcro, lo riporta in piano (sin θ), e uno smorzamento con un rapporto fisso fa il resto: in equilibrio tan θ è la differenza divisa per la sensibilità, quindi cento di differenza valgono TILT gradi. L'inerzia cresce con il carico, quindi una bilancia piena oscilla più lenta. Oltre STOP gradi il giogo batte sul fermo e rimbalza poco.

Piatti appesi come pendoli

Ogni piatto pende dalla punta del giogo con il suo angolo. Dalla posizione della punta a ogni passo si ricavano velocità e accelerazione, e il piatto risponde come un pendolo con il punto di sospensione che si muove: l ψ'' = ẍ cos ψ − (g − ÿ) sin ψ, più un po' di smorzamento. Quando il giogo scatta o batte sul fermo, i piatti restano indietro e dondolano. Le parole sul piatto girano con lui, nel suo sistema di riferimento.

Il volo e l'atterraggio

Il volo è una curva cubica che parte verso l'alto e scende dritta sul piatto dall'alto, ricalcolata a ogni fotogramma perché il piatto si muove. Il peso conta solo quando la parola tocca, non quando parte: all'atterraggio un piccolo impulso proporzionale al peso e alla velocità di caduta spinge il giogo, il piatto si piega con elastic.out e la parola si schiaccia con scaleY e l'asse della larghezza; quelle sotto, la più vicina per prima, fanno lo stesso più piano.

Quando si ferma sullo zero

Se i due totali sono uguali e il giogo è in piano e quasi fermo, un tween porta l'ago dal nero al vermiglio con back.out e allunga la tacca dello zero; basta che la bilancia si muova per spegnerla. Quando giogo e piatti sono fermi davvero la fisica si addormenta e il giogo va al suo angolo esatto, così l'immagine resta ferma. Con il movimento ridotto la bilancia compare in dissolvenza, le parole spariscono e ricompaiono al loro posto e il giogo è già all'angolo giusto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORDS`	script.js	`['lead', 'stone', 'paper', 'silk', 'bread', 'salt']`	Le parole sotto la bilancia (fino a otto, corte).
`WEIGHTS`	script.js	`[900, 700, 300, 200, 500, 400]`	Il peso del carattere di ogni parola, da 100 a 900: è anche quanto pesa sulla bilancia.
`SWING`	script.js	`1.3`	I secondi di un'oscillazione del giogo vuoto; carico oscilla più lento, come uno vero.
`SETTLE`	script.js	`0.6`	Quanto presto si spegne l'oscillazione: 0.2 dondola a lungo, 1 si posa senza overshoot.
`TILT`	script.js	`2.6`	Di quanti gradi s'inclina il giogo per ogni 100 di differenza fra i due piatti.
`STOP`	script.js	`15`	A quanti gradi il giogo batte sul fermo (e fin dove arriva la scala dell'ago).
`FLIGHT`	script.js	`0.72`	I secondi del volo di una parola fino al piatto.
`KNOCK`	script.js	`1`	Quanto forte una parola che atterra spinge giù il piatto (0 = la posa piano).
`--accent`	style.css	`#e5391c`	Il colore dell'ago quando i due lati sono pari.

Provali nel Playground

Quando usarla

Per una pagina che mette a confronto due cose: due piani di un abbonamento, due offerte, un prima e dopo. Per una copertina di tipografia che mostra i pesi di un carattere, la pagina di un font, un portfolio che gioca con le parole, una landing page che vuole un momento da toccare.

Sul telefono

Le stesse animazioni e la stessa fisica, con le misure adattate: il giogo si accorcia perché i piatti stiano dentro lo schermo, i fili sono più corti, le parole più piccole e su due righe. Un tocco manda la parola sul piatto più leggero, col dito la si trascina.

Con il movimento ridotto

Niente si muove: la bilancia e le parole compaiono in dissolvenza; un clic fa sparire la parola e la fa ricomparire sul piatto (o al suo posto), e il giogo è già all'angolo giusto. Quando i lati sono pari l'ago si colora in dissolvenza.

Trappole

Con un volo a curva quadratica la parola, che parte da sotto il piatto, ci entrava di lato passando attraverso il bordo e i fili: la curva cubica con il secondo punto di controllo sopra il piatto la fa scendere dritta dall'alto.
Con l'inerzia di partenza bassa la bilancia carica oscillava tanto più lenta di quella vuota che, dopo l'ultima parola, l'ago arrivava sullo zero dopo più di quattro secondi: l'inerzia propria del giogo è più alta e lo smorzamento è un rapporto, non un numero fisso.
Nel pendolo dei piatti l'accelerazione verticale della punta va tolta alla gravità (g − ÿ), non aggiunta: con il segno sbagliato i piatti si mettevano a dondolare proprio quando il giogo scendeva.
Sul telefono, con il giogo lungo il 36 per cento dello schermo, i piatti uscivano dai lati: la lunghezza del giogo ha anche un limite che tiene conto della larghezza del piatto.
Se il peso contasse al clic, il giogo s'inclinerebbe prima che la parola arrivi: conta all'atterraggio. Il piatto più leggero, invece, si sceglie contando anche le parole in volo, così due clic veloci non finiscono sullo stesso lato.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 15 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.