Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il quadrato che rotola e scrive
Un quadrato sottile rotola lungo una riga, un quarto di giro alla volta, e in ogni casella che lascia resta una lettera: sale dalla riga stretta e leggera e, quando il quadrato atterra, si allarga e prende peso. Poi il quadrato torna indietro e le rimette dentro la riga. Stile minimal.
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 square that rolls and writes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- a thin square rolls along a thin line, a quarter turn at a time: every cell it leaves keeps a letter, which
rises out of the line narrow and widens when the square lands; then it rolls back and presses them in -->
<svg class="figure" role="img" aria-label="Quarto" data-figure>
<defs>
<clipPath id="above-the-line">
<path data-clip></path>
</clipPath>
</defs>
<g class="ticks" data-ticks></g>
<path class="line" data-line></path>
<g class="letters" clip-path="url(#above-the-line)" data-letters></g>
<path class="square" data-square></path>
<text class="turns" data-turns>0°</text>
</svg>
</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.
12 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 quadrato che rotola e scrive» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo una riga nera sottile si disegna dal centro verso i lati e sotto cadono le tacche grigie che la dividono in caselle, come un righello. Un quadrato vermiglio a contorno sottile cade sulla prima casella: la riga cede un poco sotto il colpo e torna su con un piccolo elastico, il quadrato si schiaccia di un capello e si rialza. Poi si inclina sullo spigolo davanti e rotola di un quarto di giro: parte piano, accelera come se cadesse e atterra sulla casella dopo; appena tocca la riga torna indietro di tre gradi sullo spigolo, ricade, rimbalza ancora di meno e si ferma. Mentre il quadrato è in aria, dalla casella che ha lasciato sale una lettera, stretta e leggera, come se uscisse da una fessura nella riga; quando il quadrato atterra la lettera si allarga sull’asse wdth fino a riempire la sua casella, supera la misura di poco e torna, e prende peso. Ogni atterraggio fa cedere la riga, e le lettere vicine, che ci stanno sopra, scendono e risalgono con lei. In fondo a destra un contatore grigio dice quanti gradi ha girato il quadrato: 90, 180, fino a 540. Quando la parola QUARTO è scritta, prende tutto il peso dalla prima lettera all’ultima; l’onda arriva al quadrato, che fa un saltello e riatterra. Dopo una pausa il quadrato rotola all’indietro, più svelto, e ogni volta che atterra su una lettera la rimette dentro la riga, stretta e leggera, mentre il contatore scende a zero. Poi ricomincia. Un clic o un tocco la fa ripartire dall’inizio.
Come funziona
Il disegno in caselle
Tutto è un solo SVG con un viewBox in unità: ogni casella è larga 100, una per lettera più quella dove il quadrato finisce. La riga, le tacche, il quadrato e le lettere sono ridisegnati a ogni fotogramma da una funzione render agganciata a gsap.ticker, partendo da pochi numeri: la casella del quadrato, il suo angolo, quanto cede la riga e, per ogni lettera, quanto è salita, la sua larghezza e il suo peso. Lo spessore delle linee si ricalcola dalla larghezza vera del disegno, così resta di STROKE pixel.
Il quarto di giro
Il quadrato è una casella c e un angolo a. Con a positivo gira sullo spigolo in basso a destra, con a negativo su quello in basso a sinistra: ogni vertice viene ruotato intorno a quello spigolo con seno e coseno. A 90 gradi la casella diventa c + 1 e l’angolo torna 0: la figura è la stessa, quindi il passaggio non si vede. Il giro usa power2.in, lento all’inizio e veloce alla fine, come un corpo che cade; dopo l’atterraggio una piccola timeline porta l’angolo a meno 3,2 gradi, a zero, a meno 0,8 e di nuovo a zero: il rimbalzo sullo spigolo.
La riga che cede
La riga è una spezzata di punti ogni 6 unità. Sotto ogni atterraggio si abbassa con una campana (una gaussiana larga quasi una casella) la cui altezza va a KNOCK in 0,07 secondi e torna a zero con elastic.out, che la fa oscillare. Il quadrato, le tacche e le lettere prendono la loro altezza dalla stessa curva, quindi le vicine sentono il colpo senza nessun codice in più, e il quadrato intanto si schiaccia di un capello dal centro della base.
Le lettere che escono dalla riga
Le lettere sono testi SVG in Anybody, un carattere variabile con l’asse wdth da 50 a 150. Stanno in un gruppo ritagliato da un clipPath che è tutto lo spazio sopra la riga (anche la sua curva), quindi una lettera spostata in basso sparisce dentro la riga. Mentre il quadrato gira, la lettera della casella lasciata sale stretta (wdth 54) e leggera (240); all’atterraggio la larghezza va alla misura giusta con back.out e il peso sale a 700 e torna a 540. La misura giusta è calcolata all’avvio con getBBox: la larghezza più alta, fino a WIDE, in cui la lettera più larga occupa al massimo l’80 per cento della casella.
La regia
Una timeline in pausa tiene solo i momenti con tl.call: un quarto di giro in avanti per ogni lettera, la parola che prende peso con uno stagger e il saltello del quadrato, la pausa HOLD, i quarti di giro all’indietro che rimettono le lettere nella riga. Alla fine la timeline riparte da sola con restart, perché lo stato è tornato quello dell’inizio; l’entrata (la riga che si disegna, le tacche, il quadrato che cade) si vede solo all’apertura e dopo un clic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'QUARTO' | La parola che il quadrato scrive, da 2 a 10 lettere (gli spazi vengono tolti). Più lettere, più piccolo il disegno. |
ROLL | script.js | 0.8 | Quanti secondi dura ogni quarto di giro in avanti; all’indietro il quadrato va quasi al doppio della velocità. |
REST | script.js | 0.4 | Quanti secondi il quadrato resta fermo su ogni casella prima di inclinarsi di nuovo. |
KNOCK | script.js | 3 | Quanto cede la riga sotto ogni atterraggio, in unità (una casella è 100): 0 la lascia dritta. |
WIDE | script.js | 125 | Quanto si allargano le lettere quando il quadrato atterra, sull’asse wdth (da 50 a 150); se una lettera non sta nella casella, lo script stringe da solo. |
STROKE | script.js | 1.5 | Lo spessore del quadrato e della riga, in pixel. |
HOLD | script.js | 2.4 | Quanti secondi resta la parola scritta prima che il quadrato torni indietro. |
Quando usarla
Per l’apertura o il caricamento di un marchio corto che vuole sembrare preciso e un po’ giocoso: una tipografia o una legatoria, uno studio di grafica, una cartoleria, un’app per scrivere, un font. Anche come intro di un nome in una pagina «chi siamo» o come segnaposto mentre si prepara un documento.
Sul telefono
La stessa animazione con le misure adattate: il disegno si stringe alla larghezza dello schermo, le linee restano sottili lo stesso e le lettere restano nelle loro caselle. Un tocco la fa ripartire.
Con il movimento ridotto
Niente rotola né si sposta: la riga e le tacche sono già al loro posto, il quadrato sfuma da una casella alla successiva, ogni lettera compare in dissolvenza già larga, la parola prende peso senza muoversi e al ritorno le lettere spariscono in dissolvenza.
Trappole
- Far girare il quadrato con un transform e svgOrigin sullo spigolo obbliga a cambiare il punto di rotazione a ogni casella, e nel cambio il quadrato salta di un fotogramma. Qui i quattro vertici sono calcolati a mano: a 90 gradi si passa alla casella dopo e l’angolo torna 0, che è la stessa identica figura.
- Il rimbalzo dopo l’atterraggio va fatto con l’angolo di segno opposto, quindi sullo spigolo opposto della casella nuova: è giusto così, perché lo spigolo su cui il quadrato ha appena girato è diventato quello in basso a sinistra della casella nuova (in basso a destra quando torna indietro).
- La coda della Q di Anybody scende sotto la linea di base: il ritaglio sopra la riga la taglia esattamente sulla riga, così sembra appoggiata invece di passare sotto.
- Se il ritaglio delle lettere fosse un rettangolo fisso, quando la riga cede le lettere vicine scenderebbero e il loro piede verrebbe tagliato dritto, staccato dalla curva. Il clipPath segue la stessa curva della riga e viene riscritto a ogni fotogramma.
- Con REST a zero nel Playground un quarto di giro nuovo parte mentre il rimbalzo del precedente è ancora in corso, e due tween si contenderebbero l’angolo: ogni giro prima ferma i tween dell’angolo con killTweensOf e riparte dall’angolo dov’è, che è continuo fra i due spigoli.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,7 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.
