Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola che scende le scale
Animazione di testo in stile minimal, con una fisica vera: le lettere di una parola, ognuna in una scatola di filo, rotolano giù da una scala sottile spigolo dopo spigolo, volano un poco, atterrano su un angolo e proseguono; sul pavimento si fermano ognuna al suo posto, e dentro ogni scatola la lettera dondola come un pendolo e si raddrizza, così la parola si legge.
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>The word that tumbles down the stairs</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>
<header class="top">
<span class="brand">Landing</span>
<span class="meta">Design studio</span>
</header>
<!-- the stairs, the floor and the impact marks: one SVG drawn by the script -->
<svg class="scene" data-scene aria-hidden="true">
<path class="stairs" data-stairs d="" />
<g data-ticks></g>
<g data-marks></g>
</svg>
<!-- the boxes: each one a hairline square with its letter hanging inside -->
<div class="boxes" data-boxes aria-hidden="true"></div>
<h1 class="sr-only" data-word>Landing</h1>
<div class="foot">
<p class="line" data-line>We take things one step at a time.</p>
<button class="replay" type="button" data-replay data-autoclic>Replay</button>
</div>
</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.
19 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 «La parola che scende le scale» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con una scala disegnata a filo: quattro gradini che scendono da sinistra su un lungo pavimento con piccole tacche sotto. Dall’alto cade la prima scatola, un quadrato sottile con dentro una lettera chiara e stretta, e si posa sul primo gradino. Un attimo dopo si ribalta: gira sul suo angolo davanti, oltre lo spigolo del gradino resta imperniata sul bordo finché un altro angolo tocca il gradino sotto, e lì riparte; scende così tutta la scala, gradino dopo gradino, e a ogni colpo il gradino cede di un niente e due trattini vermigli si aprono dove la scatola ha toccato. Sul pavimento continua a ribaltarsi finché arriva al suo posto, prova a fare un’altra capriola, non ce la fa e torna indietro dondolando sull’angolo. Intanto, dentro la scatola, la lettera è appesa come un pendolo: la scatola gira e lei oscilla, resta indietro, si raddrizza; ogni colpo forte la stringe per un attimo. Le scatole arrivano una alla volta, prima l’ultima lettera, che ha più strada da fare, e una per una la parola «Landing» si compone sul pavimento: le lettere al loro posto prendono peso e larghezza e il filo della scatola si scurisce. Con l’ultima lettera arriva sotto la frase «We take things one step at a time.», che si allarga sull’asse della larghezza, e il tasto Replay; dopo qualche secondo le scatole svaniscono e tutto ricomincia. Col puntatore su una lettera ferma, o toccandola, la scatola si solleva su un angolo e ricade, e la lettera dondola.
Come funziona
Il mondo in unità di scatola
Tutto si calcola in unità di una scatola (una scatola è larga 1): la scala sono gradini larghi 1 e alti RISER, il pavimento parte dopo l’ultimo gradino. La gravità è in unità al secondo quadrato, quindi il moto è lo stesso su ogni schermo e si disegna moltiplicando per la grandezza della scatola in pixel. Una funzione dice a che altezza sta il terreno sotto ogni x, e un’altra dove finisce la superficie a una certa altezza (lo spigolo del gradino; il pavimento non finisce).
Girare su un punto
Una scatola in movimento gira sempre su un punto del terreno: un suo angolo, oppure lo spigolo del gradino sotto il suo lato. L’equazione è quella di un corpo rigido imperniato: accelerazione angolare uguale a gravità per distanza dal perno per il seno dell’angolo, diviso il momento d’inerzia attorno al perno (1/6 per il quadrato più la distanza al quadrato). Il centro si ricava dal perno con seno e coseno, e la rotazione della scatola va di pari passo.
Gli urti
A ogni passo si guardano gli angoli che scendono: se uno tocca il terreno allo stesso livello del perno, la scatola è piatta e la rotazione si arrotonda al quarto di giro; se lo tocca più in basso, su un gradino sotto, quell’angolo diventa il nuovo perno. Ogni urto mangia una parte della rotazione (BOUNCE). Una scatola che si posa con più di metà fuori dallo spigolo si ribalta subito.
Il posto nella parola
Prima di partire una scatola viene fatta scendere da sola, a vuoto, per trovare dove tocca per la prima volta il pavimento: quel punto è il posto della prima lettera, e ogni capriola sul pavimento sposta esattamente di una scatola. Sul pavimento la rotazione non scende sotto quella che serve a superare l’angolo finché la scatola non è arrivata; lì le si dà apposta un po’ meno: prova un’altra capriola e torna indietro. Parte prima l’ultima lettera, che va più lontano.
La lettera a pendolo
La lettera dentro ogni scatola ha un suo angolo nel mondo e una sua velocità: una molla di gravità la riporta dritta, un attrito la trascina con la rotazione della scatola e un’aria la smorza. Si disegna ruotata della differenza fra il suo angolo e quello della scatola. Peso e larghezza sono assi del carattere variabile: leggera e stretta mentre rotola, piena e larga al suo posto; gli urti forti la stringono per un attimo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Landing' | La parola: una scatola per lettera (fino a 9 lettere). |
STEPS | script.js | 4 | Quanti gradini ha la scala (da 2 a 6; su uno schermo stretto ne usa meno). |
RISER | script.js | 0.55 | Quanto è alto un gradino, rispetto a una scatola (0.3 gradini bassi, 0.9 alti). |
GRAVITY | script.js | 1 | Quanto è pesante il mondo: 0.6 lento e leggero, 1.8 svelto e pesante. |
BOUNCE | script.js | 0.55 | Quanta rotazione tiene una scatola dopo ogni urto (0.3 si spegne, 0.75 vivace). |
SWING | script.js | 1 | Quanto oscillano libere le lettere dentro le scatole (0.4 rigide, 2 molli). |
LIGHT | script.js | 280 | Il peso delle lettere mentre rotolano (da 100 a 900). |
HEAVY | script.js | 700 | Il peso che prendono al loro posto (da 100 a 900). |
HOLD | script.js | 3 | I secondi in cui la parola finita resta prima di ricominciare. |
Quando usarla
Per l’apertura di uno studio di design, di architettura o di un’agenzia che vuole un titolo con un po’ di gioco: il nome che arriva giù dalle scale e si mette in fila, con la frase sotto. Va bene anche come intro del marchio o per una pagina «chi siamo» che parla di fare le cose un passo alla volta.
Sul telefono
La stessa fisica con le misure adattate: le scatole si misurano su larghezza e altezza dello schermo, e se lo schermo è stretto la scala ha meno scalini, così le lettere restano leggibili. Un tocco su una lettera ferma la fa dondolare.
Con il movimento ridotto
Niente rotola: le lettere compaiono già in fila sul pavimento, una dopo l’altra in dissolvenza, e poi la frase.
Trappole
- Lasciare la scatola in volo appena girata di 90 gradi oltre lo spigolo non funziona: atterra su un angolo col centro dietro e la fisica vera la fa tornare indietro, e si fermava sul primo gradino. Resta imperniata sullo spigolo finché un altro angolo tocca il gradino sotto.
- Nel momento in cui una scatola piatta comincia a girare, il suo angolo dietro tocca ancora il terreno: per gli urti contano solo gli angoli che scendono (velocità del punto verso il basso), altrimenti finiva subito il giro.
- I posti delle lettere non si possono scegliere a mano: dove una scatola tocca il pavimento dipende dalla fisica. Una scatola fatta scendere a vuoto prima di cominciare dà il punto, e siccome il mondo è uguale per tutte le scatole, tutte toccano lì.
- Una scatola ferma dopo un dondolio all’indietro si posava una casella prima: la parte sinistra di una scatola piatta è lo spigolo che tocca meno uno andando avanti, e lo spigolo stesso tornando indietro.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
