Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La lente tipografica sulla pagina
Animazione di testo in stile minimal: una pagina di libro composta giustificata in un carattere variabile, e il puntatore è una lente invisibile. Le lettere vicine prendono peso, larghezza e grandezza ottica con una caduta morbida, le righe sopra e sotto si scostano su una molla per fare posto, e la parola sotto il centro si accende nel vermiglio. Quando nessuno muove il puntatore, un lettore invisibile legge la pagina riga per riga.
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 typographic lens on the page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a page of an invented book: the script splits the paragraph into lines and letters; an invisible lens follows the
pointer (or reads the page by itself) and swells the letters it passes over on the weight, width and optical size
axes, while the lines above and below step aside -->
<main class="pagina" data-pagina>
<header class="testa" data-entra>
<span class="testa__libro">The Slow Reader</span>
<span class="testa__capitolo">On margins</span>
</header>
<p class="per-chi-legge" data-leggibile></p>
<div class="testo" data-testo></div>
<footer class="folio" data-entra><span data-folio>112</span></footer>
</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.
20 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 lente tipografica sulla pagina» da Animorio e adattala al mio sitoCosa fa
Una pagina di un libro inventato, The Slow Reader, al centro di un bianco caldo: in alto la testatina con il titolo del libro e del capitolo su un filetto, sotto un paragrafo di sette righe giustificate in Roboto Flex leggero, in fondo il numero di pagina. All’apertura le parole salgono riga dopo riga dalla carta. Poi, dove passa il puntatore, le lettere si gonfiano: prendono peso, si allargano e salgono di grandezza ottica, tanto più quanto sono vicine al centro, con una caduta morbida a campana che prende due o tre parole e un po’ delle righe sopra e sotto. Le righe vicine si scostano per fare posto, quelle sopra salgono e quelle sotto scendono, e tornano al loro posto su una molla; dentro la riga le parole consumano prima gli spazi della giustificazione, poi la riga cresce intorno alla lente senza mai uscire dalla colonna. La parola esattamente sotto il centro diventa vermiglio. Quando la lente corre gonfia un po’ meno; quando si ferma si mette a fuoco, gonfia un niente di più e si assesta. Se nessuno muove il puntatore, un lettore invisibile legge la pagina da sinistra a destra, riga per riga, va a capo e alla fine torna in cima.
Come funziona
Le righe come le ha composte il browser
Il paragrafo si compone prima come testo normale, invisibile, nella misura e nel corpo giusti: dall’offsetTop di ogni parola si capisce dove va a capo. Poi ogni riga diventa una fila di parole con justify-content: space-between, cioè una riga giustificata, e ogni parola è fatta di span, una per lettera. Una riga che dovrebbe aprire troppo gli spazi (più di mezzo corpo fra due parole) resta a bandiera, come farebbe un compositore: sul telefono capita.
La lente
Le posizioni a riposo di ogni lettera si leggono una volta sola, e di nuovo al resize. A ogni fotogramma la distanza dal centro della lente dà un valore fra 0 e 1 con una campana (l’esponenziale del quadrato della distanza), e quel valore porta l’asse del peso da 360 a 820, quello della larghezza da 100 a 126, la grandezza ottica del corpo più 40 e un filo di grado: si scrive in font-variation-settings, solo per le lettere che cambiano davvero.
Le righe che fanno posto
Ogni riga ha la sua campana in verticale e chiede uno spazio in più proporzionale; la somma degli spazi sposta le righe sopra in su e quelle sotto in giù, tenendo ferma quella sotto la lente. Dopo aver scritto le lettere, lo script legge in un colpo solo lo scrollWidth delle righe toccate: quello che sfora dalla giustezza si toglie spostando la riga verso sinistra in proporzione a dove sta la lente, così la riga cresce intorno al puntatore. Due molle, in verticale e in orizzontale, portano le righe dove devono stare.
La messa a fuoco e il lettore
La lente segue il puntatore su una molla. La sua forza è un’altra molla, poco frenata: in corsa punta a 0,8, ferma a 1, e arrivandoci passa oltre di un niente e torna, che è la messa a fuoco. Quando il puntatore vero tace per 2,4 secondi, il bersaglio della lente lo dà una timeline GSAP che si ripete: un numero da 0 a 1 che diventa la lettura riga per riga, con il ritorno a capo e il ritorno in cima. Con il movimento ridotto niente si gonfia: si colora solo la parola sotto il puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RADIUS | script.js | 2 | Il raggio della lente, in righe di testo: la caduta è morbida, a campana. |
REST_WEIGHT | script.js | 360 | Il peso del testo a riposo, da 100 a 1000. |
MAX_WEIGHT | script.js | 820 | Il peso al centro della lente. |
MAX_WIDTH | script.js | 126 | La larghezza al centro della lente, sull’asse wdth (100 è normale, fino a 151). |
LIFT | script.js | 40 | Quanto sale la grandezza ottica al centro della lente. |
ROOM | script.js | 0.32 | Quanto si apre l’interlinea intorno alla lente, in corpi del testo. |
SPRING | script.js | [170, 15] | La molla delle righe che si scostano: quanto è rigida e quanto è frenata. |
FOCUS | script.js | [140, 9] | La molla della messa a fuoco quando la lente si ferma: meno frenata, più si assesta. |
SLACK | script.js | 0.55 | Lo spazio più largo che una riga giustificata può aprire fra due parole, in corpi; oltre resta a bandiera. |
LINE_TIME | script.js | 2.6 | In quanti secondi il lettore invisibile legge una riga. |
TEXT | script.js | 'Read a page the way…' | Il testo della pagina. |
Quando usarla
Per una pagina di lettura che vuole farsi notare senza fare rumore: un racconto lungo, la presentazione di una fonderia di caratteri, l’introduzione di una rivista o di un libro, la pagina «chi siamo» di uno studio di grafica.
Sul telefono
La stessa animazione: il dito trascinato è la lente e, a riposo, legge il lettore invisibile. Il corpo e la misura si adattano allo schermo, e le righe che si aprirebbero troppo restano a bandiera.
Con il movimento ridotto
Niente si gonfia e niente si sposta: la pagina compare in dissolvenza e si colora solo la parola sotto il puntatore.
Trappole
- Le lettere che si allargano farebbero andare a capo il testo a ogni fotogramma: le righe si compongono una volta sola e diventano file di parole che non vanno mai a capo; quello che sfora si riprende spostando la riga.
- Gonfiare le lettere sposta il layout: si scrivono prima tutte le lettere che cambiano e solo dopo si leggono le larghezze delle righe toccate, così il browser ricalcola una volta per fotogramma.
- Lo strumento di scrittura ha trasformato lo spazio indivisibile scritto con la sequenza barra-u nel carattere vero: si scrive con String.fromCharCode(160).
- L’IntersectionObserver accendeva il ciclo prima che la pagina fosse composta: il fotogramma esce subito se non ci sono righe.
- Le parole salgono all’apertura con GSAP e le righe le sposta la lente: un elemento per GSAP e uno per la molla, altrimenti il transform dell’uno cancella quello dell’altro.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi wght, wdth, opsz e GRAD) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
