Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola a moduli
Una parola disegnata con venti rettangoli e stirata a riempire lo schermo: una lente segue il puntatore e dove passa le lettere si allargano e le righe si alzano. Scorrendo, la parola si ritira in testata.
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 in blocks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- la banda: una parola fatta di rettangoli, stirata a riempire lo schermo; scorrendo si ritira in testata -->
<header class="banda" data-banda>
<div class="banda__fondo" data-fondo aria-hidden="true"></div>
<div class="banda__parola" data-parola aria-hidden="true"></div>
<h1 class="nascosto">Trama</h1>
</header>
<p class="nota" data-nota>Move the mouse over the word: it is made of rectangles, and it widens where you pass. Then scroll.</p>
<main class="pagina" data-pagina>
<section class="testo">
<h2 class="testo__titolo">A word made of rectangles.</h2>
<p class="testo__corpo">Every letter is a handful of rectangles on a grid of ten rows: the stems are three wide, the bars two tall. No curves, no font to load. That is why the word can be stretched any way you like: the proportions change, but it stays readable.</p>
<p class="testo__corpo">On every frame the script works out again the width of each letter and the height of each row around one point, the lens, and rewrites the sizes of the rectangles. Where the lens is the word swells, and the rest squeezes in to make room.</p>
</section>
<section class="testo testo--due">
<h2 class="testo__titolo">Scroll, and the word folds up into a header.</h2>
<p class="testo__corpo">The band goes from the whole screen to a strip at the top, and the rectangles line up again by themselves inside the new size. The lens keeps working up there too.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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
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 a moduli» da Animorio e adattala al mio sitoCosa fa
La parola TRAMA riempie lo schermo, disegnata con un alfabeto fatto solo di rettangoli: ogni lettera sta su una griglia di dieci righe, con aste larghe tre e barre alte due. All’apertura le lettere crescono dal basso una dopo l’altra. Passando col mouse, una lente invisibile la deforma: le lettere vicine al puntatore si allargano, le righe vicine si alzano, e il resto si stringe per fargli posto, senza che la parola smetta di leggersi. Scorrendo, la banda si ritira in una striscia in testa alla stessa velocità della pagina, e i rettangoli si rimettono in fila da soli dentro la nuova misura; la lente funziona anche lì.
Come funziona
Un alfabeto di rettangoli
Ogni lettera è un oggetto con la sua larghezza in unità e un elenco di rettangoli [x, y, larghezza, altezza] su dieci righe: la T ne ha due, la R cinque. Lo script crea un elemento per rettangolo, posizionato in assoluto dentro la banda. Niente font e niente SVG: per stirare la parola basta cambiare le misure.
Le lettere pesano
A ogni fotogramma ogni lettera prende un peso, 1 più la forza della lente per una campana di Gauss sulla distanza fra il suo centro e il puntatore. Le larghezze e gli spazi si moltiplicano per il peso e poi si scalano tutti insieme per riempire la banda: quello che si allarga da una parte si stringe dall’altra.
Le righe si piegano
In verticale si costruisce una tabella di 64 passi: la densità di ogni fascia è 1 più una campana intorno all’altezza del puntatore, e sommandole si ottiene una curva che va da 0 a 1 sempre crescendo. Ogni bordo di rettangolo passa per la curva, così le righe vicine si alzano e nessuna si incrocia.
Bordi arrotondati uno per uno
I due bordi di ogni rettangolo si arrotondano al pixel ognuno per conto suo, e la larghezza è la differenza: due moduli che si toccano condividono lo stesso pixel, e fra loro non compare mai una fessura. Le misure si riscrivono solo se cambiano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PAROLA | script.js | TRAMA | La parola: ogni lettera deve esserci nell’ALFABETO. |
ALFABETO | script.js | T, R, A, M | Le lettere: larghezza in unità e rettangoli [x, y, larghezza, altezza] su dieci righe. Se ne aggiungono altre allo stesso modo. |
LENTE | script.js | 1.7 | Quanto si gonfia la parte sotto il puntatore; 0 la spegne. |
LARGA, ALTA | script.js | 0.2, 0.3 | Quanto è larga e alta la lente, in frazioni della parola e della banda. |
TESTATA | script.js | 0.1 | L’altezza della banda ritirata, in frazioni della larghezza. |
Quando usarla
Per il nome di un marchio, di un progetto o di una mostra che deve occupare tutta la prima schermata e poi diventare la testata: una parola corta, cinque o sei lettere, da disegnare a rettangoli.
Sul telefono
Al telefono la banda è alta poco più della larghezza (alta quanto lo schermo diventerebbe solo strisce) e la lente fa il giro da sola, da un angolo all’altro; un tocco la porta dove tocchi.
Con il movimento ridotto
La parola sta ferma in cima alla pagina, senza lente e senza crescere; la banda non si ritira e la pagina scorre normale.
Trappole
- Arrotondare la larghezza invece dei due bordi apre fessure di un pixel fra moduli vicini, che tremolano mentre la lente si muove.
- Per piegare le righe non basta scalare l’altezza vicino al puntatore: serve una curva sempre crescente, o due righe si incrociano.
- Se le larghezze delle lettere cambiano ma gli spazi no, la parola si sbilancia: anche gli spazi devono prendere il peso delle lettere vicine.
- Alta quanto uno schermo di telefono, la parola diventa una serie di strisce: sotto i 700 px la banda è alta poco più della larghezza.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 21 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
