Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Lo sfondo di lettere che prendono peso
Uno sfondo animato da mettere dietro a un titolo o a una sezione: una pagina nera coperta di lettere piccole, come un retino da stampa fatto di caratteri. Bande di peso corrono piano sulle righe e le lettere passano dal filo al nero pieno e tornano; dove va il puntatore si gonfiano, e le più piene prendono il giallo limone. 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>Heft</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>
<!-- the background: a grid of small letters on a canvas behind the page, like a halftone made of type; bands of
weight run across them, so letters go from hairline to black and back, and they swell where the pointer goes -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Heft</p>
<p class="testa__nota">A quarterly about type</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>The autumn issue is out</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Words carry</span></span>
<span class="riga"><span class="riga__dentro" data-riga>weight<span class="accento">.</span></span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Read the new issue">Read the new issue</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
</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.
23 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 «Lo sfondo di lettere che prendono peso» da Animorio e adattala al mio sitoCosa fa
Una pagina intera nera, il fondo di una rivista di tipografia inventata, Heft. Dietro a tutto, su un canvas, righe e righe di lettere piccole grigie, la parola heft ripetuta senza spazi, ogni riga che comincia da una lettera diversa: da lontano è una trama, come un retino da stampa fatto di caratteri. Il peso di ogni lettera cambia: bande diagonali e ondulate corrono piano sulla pagina, e le lettere passano dal filo sottile e spento al nero pieno e acceso e tornano indietro, così si vedono onde di grigio che scorrono. Dove va il puntatore le lettere si gonfiano in una macchia morbida, e al centro le più piene diventano giallo limone, l'unico colore; quando nessuno lo muove, un puntatore finto passeggia per la pagina. Intorno al titolo e alle scritte della testata le lettere restano al filo, appena accennate. Al centro il titolo: The autumn issue is out, poi due righe in Roboto Flex (Words carry weight.) con il punto finale giallo, e una pillola chiara (Read the new issue) con la freccia; in alto il marchio e A quarterly about type. All'apertura un'onda di peso parte dal centro e attraversa la pagina, un anello di lettere piene che lascia dietro di sé la trama, e le righe del titolo salgono dalla loro finestra passando da larghe e al filo a strette e piene.
Come funziona
Il foglio di timbri
Disegnare migliaia di lettere con fillText e un peso diverso per ognuna sarebbe lento. All'inizio si disegna una volta sola, su un canvas nascosto, ogni lettera di TESTO in diciannove pesi da 100 a 1000 (il canvas accetta il peso numerico di un carattere variabile) e in due tinte, il grigio e l'accento. Poi ogni lettera della griglia è solo un drawImage da quel foglio: migliaia per fotogramma restano leggere.
Le righe di lettere
Le lettere stanno su righe come un testo: il passo è AVANZA volte il corpo in orizzontale e INTERLINEA volte in verticale, e ogni riga comincia tre lettere più avanti della precedente, così le colonne non si allineano. Per ogni lettera si misura una volta la distanza dal titolo e dalla testata (una superellisse con una piuma).
Le bande di peso
Il peso è un'onda: il seno della distanza lungo una diagonale, divisa per BANDE, storta da due seni più lenti e spinta dalla fase di una timeline GSAP lunga GIRO secondi, che in un giro torna uguale. Un esponente sopra 1 lascia più lettere sottili che piene: le bande restano strette e la pagina respira.
Il puntatore che gonfia
Il puntatore aggiunge al peso GONFIA · e^(−d²/2·LARGO²), su una molla (MOLLA). Dove il gonfiore supera l'86% e la lettera è fra le più piene, si prende il timbro nell'accento. Senza il puntatore vero una passeggiata finta legata al giro gonfia le lettere al suo posto.
L'apertura
Un fronte parte dal centro e arriva agli angoli: prima di lui le lettere non ci sono, sul fronte un anello di Gauss le porta al peso pieno, dietro si posano sul peso delle bande. Le righe del titolo salgono con back.out mentre font-stretch passa da 140% a 88% e il peso da 100 a 760.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TESTO | script.js | heft | Le lettere della griglia, ripetute in fila. |
CORPO | script.js | 13 | La grandezza delle lettere, in px (sul telefono un poco meno). |
AVANZA | script.js | 0.82 | Il passo fra una lettera e la successiva, in frazioni del corpo. |
INTERLINEA | script.js | 1.32 | Il passo fra una riga e l'altra, in frazioni del corpo. |
BANDE | script.js | 300 | La distanza fra una banda di peso e l'altra, in px. |
GIRO | script.js | 18 | In quanti secondi le bande fanno un giro intero e tornano uguali. |
GONFIA | script.js | 1.1 | Quanto si gonfiano le lettere vicino al puntatore (0 niente). |
LARGO | script.js | 120 | Quanto è larga la zona che il puntatore gonfia, in px. |
MOLLA | script.js | [70, 11] | La molla del puntatore: quanto è rigida e quanto è frenata. |
Quando usarla
Come fondo della prima schermata di una rivista, di un blog di scrittura, di una fonderia di caratteri, di uno studio grafico, di una tipografia o di una fiera del libro; in generale dietro a un titolo corto quando si vuole un nero che parla di parole. Le lettere si cambiano in TESTO (il nome del marchio funziona bene) e i due colori nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: le lettere sono un poco più piccole e le righe più strette, il titolo più piccolo con la sua zona calma. Il dito gonfia le lettere mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
Le lettere sono ferme, con le bande di peso al loro posto: niente scorrere, niente gonfiore, niente onda all'apertura. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Le lettere una per cella, in una griglia larga, si leggevano come una tabella di lettere e non come una trama: in righe fitte, con il passo di un testo, diventano un retino.
- Con le bande passate per una curva a S le lettere erano o al filo o piene, a strisce nette: senza quella curva e con un esponente si vedono le sfumature di grigio.
- Il carattere va caricato prima di disegnare i timbri: altrimenti il canvas usa il carattere di riserva e i timbri restano sbagliati fino al ridimensionamento. Si aspetta document.fonts.load per tre pesi.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
