La parola sul piano inclinato

Testo, FisicaGSAPMediaPeso compresso: Demo 5,9 KBGSAP 28 KBGratisScarica lo zip

L’allineamento fatto dalla gravità, nello stile minimal: una parola su una riga sottile appoggiata a un piccolo fulcro. La riga si inclina e le lettere scivolano giù una dopo l’altra, sbattono contro il fermo e si compongono a sinistra, poi a destra; tornata in piano la parola si allarga sull’asse wdth e si giustifica, infine si raccoglie al centro e prende peso.

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>The word on the tilt</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>
    <!-- one word on a thin beam that rests on a pivot. The beam tilts and the letters slide down to the low end,
         one after the other, and set the word flush left, flush right, justified and centred: alignment by gravity.
         The script builds the letters and works out where each one goes -->
    <div class="lever" data-lever>
      <h1 class="word" data-word>
        <span class="sr" data-sr>Balance</span>
      </h1>
      <span class="beam" data-beam aria-hidden="true"></span>
      <span class="stop stop--left" data-stop-left aria-hidden="true"></span>
      <span class="stop stop--right" data-stop-right aria-hidden="true"></span>
    </div>
    <svg class="pivot" viewBox="0 0 24 20" aria-hidden="true" data-pivot>
      <path d="M12 1 L23 19 L1 19 Z" />
    </svg>
    <p class="label" aria-hidden="true">
      <span class="label__clip" data-label></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

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 parola sul piano inclinato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco caldo spunta un piccolo triangolo blu, il fulcro; sopra di lui una riga nera sottile si disegna dal centro verso i lati e alle due estremità si alzano due fermi. Le lettere di «Balance» cadono sulla riga una alla volta e ognuna, posandosi, si schiaccia un poco e torna su, mentre la riga cede di un pixel sotto il suo peso. Sotto il fulcro una riga piccola in maiuscolo dice come è allineata la parola: Centred. Poi la riga si inclina a sinistra con un piccolo assestamento: le lettere stanno ferme un istante, poi si staccano una dopo l’altra e scivolano giù accelerando, stringendosi mentre corrono. La prima sbatte contro il fermo, che si piega e si accende di blu per un attimo; le altre arrivano dietro di lei, ognuna si schiaccia contro quella davanti e le ultime già ferme sentono il colpo. Quando arriva l’ultima la riga cala ancora di un capello sotto il peso, e la scritta diventa Flush left. Poi la riga si inclina dall’altra parte e la parola scivola a destra, a partire dall’ultima lettera: Flush right. La riga torna in piano, le lettere si allargano sull’asse della larghezza del carattere e si distribuiscono da un fermo all’altro: Justified. Infine si raccolgono al centro, riprendono la loro larghezza e diventano più pesanti dal centro verso i lati, mentre il fulcro si schiaccia e si rialza: Centred. La parola si alza e svanisce, la riga si richiude nel fulcro e tutto ricomincia. Un clic o un tocco la fa ripartire.

Come funziona

Una leva e le sue lettere

La riga, i due fermi e la parola stanno in un solo contenitore, la leva, che ruota attorno al suo punto in basso al centro: proprio sopra la punta del fulcro. Così, quando la leva si inclina, le lettere restano appoggiate alla riga senza calcoli. Ogni lettera è una scatola posizionata in assoluto con dentro il suo segno: GSAP muove la scatola lungo la riga (x), il segno si schiaccia, scivola di un pixel e cambia larghezza e peso con le variabili --wdth e --wght lette da font-variation-settings.

Quattro allineamenti misurati

All’avvio lo script misura la larghezza di ogni lettera tre volte: a larghezza normale, all’asse wdth della giustificazione (SPREAD) e al peso finale (HEAVY). Da lì calcola dove sta ogni lettera a sinistra, a destra, al centro e giustificata (le lettere larghe e lo spazio che avanza diviso in parti uguali). La parola centrata pesante ha le sue posizioni: con le larghezze normali le lettere nere si toccherebbero. La linea di base si trova con un elemento alto zero messo dentro la prima lettera, così ogni lettera sta in piedi sulla riga qualunque sia il carattere.

Lo stacco e la caduta

Quando la riga si inclina, le lettere non partono insieme: la più vicina all’estremità bassa si stacca per prima e ognuna delle altre la segue dopo PEEL secondi. Tutte scivolano per SLIDE secondi con power2.in, cioè accelerando come su un piano inclinato vero, e durante la corsa si stringono sull’asse wdth. Siccome partono sfalsate, arrivano sfalsate: ognuna chiude lo spazio dietro la precedente e la tocca nel suo posto.

Il colpo

All’arrivo ogni lettera si schiaccia verso il lato da cui arriva (scaleX a SQUASH, con l’origine sul lato del colpo) e torna con un back.out; le tre lettere già ferme davanti a lei si spostano di un pixel verso il fermo e tornano, una dopo l’altra. La prima lettera invece colpisce il fermo, che ruota di qualche grado, si accende di blu e si rimette dritto con un elastic.out. All’ultima lettera la leva scende di mezzo grado e si riassesta: la riga sente il peso.

La regia

Tutto è una timeline sola che si ripete, costruita con le posizioni misurate: le inclinazioni sono timeline più piccole aggiunte al loro tempo, la riga piccola sotto il fulcro è una colonna di cinque nomi che scorre in una finestra con overflow nascosto. Al ridimensionamento della finestra lo script rimisura e ricostruisce la timeline.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Balance'`	La parola sulla riga: meglio corta, da 4 a 10 lettere.
`TILT`	script.js	`3.5`	Quanto si inclina la riga, in gradi.
`SLIDE`	script.js	`0.9`	Quanti secondi impiega una lettera a scivolare fino in fondo.
`PEEL`	script.js	`0.07`	Quanti secondi passano fra una lettera che si stacca e la successiva: 0 fa scivolare la parola tutta insieme.
`SQUASH`	script.js	`0.86`	Quanto si stringe una lettera quando sbatte contro quella davanti (1 non si stringe).
`SPREAD`	script.js	`125`	Quanto si allargano le lettere sull’asse wdth per riempire la riga giustificata, da 75 a 125.
`HEAVY`	script.js	`680`	Il peso che prende la parola quando torna al centro, da 100 a 900.
`HOLD`	script.js	`1.1`	Quanti secondi resta ogni allineamento prima che la riga si muova di nuovo.
`NAMES`	script.js	`{ centred: 'Centred', left: 'Flush left', right: 'Flush right', justified: 'Justified' }`	I nomi degli allineamenti nella riga piccola sotto il fulcro.

Provali nel Playground

Quando usarla

Per l’apertura di un marchio che parla di equilibrio (un centro benessere, uno studio di yoga, un’app per i conti, un ritiro in montagna), per la pagina di uno studio di tipografia o di un carattere variabile, o dentro un articolo che spiega come si impagina un testo.

Sul telefono

La stessa animazione con le misure adattate: la riga prende quasi tutta la larghezza e la parola si rimpicciolisce in proporzione, così ci sta anche giustificata. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove né si inclina: la riga resta in piano, la parola sfuma e ricompare già nel suo allineamento nuovo, e la riga piccola cambia nome con una dissolvenza.

Trappole

Le posizioni erano calcolate con le larghezze del peso normale: quando la parola centrata diventava pesante le lettere si allargavano e si toccavano. Ora lo script misura anche le larghezze al peso finale e, mentre la parola prende peso, ogni lettera si sposta nella sua posizione nuova.
Il segno della lettera e la sua scatola sono due elementi: GSAP muove la scatola con x, e sul segno fa lo schiacciamento e lo spostamento di un pixel. Con un solo elemento il colpo avrebbe cancellato la posizione sulla riga.
Se le lettere scivolano tutte insieme arrivano tutte insieme e non si vede nessun colpo: per questo partono sfalsate di PEEL, a cominciare da quella più vicina all’estremità bassa.
Le larghezze si misurano solo dopo che il carattere è caricato (document.fonts.load): con il carattere di riserva la parola giustificata usciva dai fermi.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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