Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Lettere a portata di mano
Scorri dentro l’anteprima
L’ultima sezione della pagina scivola via e scopre il piede, fermo sotto come se fosse sempre stato lì, mentre le lettere del motto salgono una dopo l’altra dalla loro riga. A piede aperto la lettera sotto il puntatore si allunga verso di lui, in su o in giù, le due vicine la seguono a metà, e tutte e tre prendono un colore e si piegano verso la mano.
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>Letters within reach</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the last section of the page: it slides away and uncovers the footer -->
<main class="closing">
<div class="closing__inner">
<p class="closing__brand">Common Room</p>
<h1 class="closing__title">Long tables, loud dinners, and chairs that can take it.</h1>
<p class="closing__line">Oak tables for ten, benches for twelve, chairs that stack when the guests go home.</p>
<a class="closing__button" href="#">Find your table</a>
</div>
<p class="closing__hint" data-hint>Scroll to the end</p>
</main>
<!-- the footer waits under the page: the mask makes room for it, the footer itself stays put while the page moves -->
<div class="mask" data-mask>
<footer class="foot" data-foot>
<div class="foot__top">
<p class="foot__lead">Dinner is better with more people at the table.</p>
<nav class="foot__cols" aria-label="Footer">
<div>
<p class="foot__head">Shop</p>
<a href="#">Tables</a>
<a href="#">Benches</a>
<a href="#">Chairs</a>
</div>
<div>
<p class="foot__head">Visit</p>
<a href="#">The workshop</a>
<a href="#">Opening hours</a>
</div>
<div>
<p class="foot__head">Say hello</p>
<a href="#">Write to us</a>
<a href="#">Instagram</a>
</div>
</nav>
</div>
<!-- the motto: each letter is its own span, so the pointer can reach it -->
<p class="slogan" data-slogan aria-label="good company">good company</p>
<div class="foot__bottom">
<p>Common Room, tables built in small batches</p>
<button class="foot__top-link" type="button" data-top>Back to top</button>
</div>
</footer>
</div>
<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="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.
36 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 «Lettere a portata di mano» da Animorio e adattala al mio sitoCosa fa
La fine della pagina di un marchio inventato di tavoli e sedie, Common Room. La sezione di chiusura è verde scuro, con gli angoli in basso arrotondati: scorrendo sale via e sotto compare il piede color sabbia, che non si muove. In alto una frase e tre colonne di link, in fondo il motto «good company» largo quanto lo schermo. Mentre il piede si apre le lettere del motto salgono dalla loro riga una dopo l’altra, ognuna un poco dopo la precedente, e finiscono insieme al piede. Aperto il piede, la lettera sotto il puntatore lo insegue: se il puntatore è sopra la riga sale di un quarto della distanza, se è sotto scende; le due vicine si muovono della metà. Le tre lettere prendono ognuna il suo colore (terracotta, oliva, prugna, zafferano, verde acqua, a turno) e si inclinano verso il puntatore. Spostandosi, il colore passa alle lettere nuove e quelle lasciate tornano nere e in riga in meno di due decimi di secondo. Se nessuno muove il puntatore per due secondi e mezzo, una mano invisibile percorre il motto avanti e indietro, salendo e scendendo. Il bottone «Back to top» riporta in cima.
Come funziona
Il piede che non si muove
Il piede sta dentro una maschera alta quanto lui, sotto la sezione di chiusura che ha lo z-index più alto. Un solo tween di ScrollTrigger lo sposta da yPercent −100 a 0 mentre la maschera va dal fondo dello schermo al suo bordo inferiore, con scrub e senza curva: il piede scende esattamente quanto la pagina sale, quindi sullo schermo resta fermo e sembra scoperto, non arrivato.
Le lettere che salgono
Il motto viene spezzato in lettere, ognuna fatta di due span. Quello esterno aspetta RISE altezze più in basso, nascosto dalla riga che ha overflow: hidden, e sale con una timeline ferma che segue il progresso del piede: STAGGER secondi fra una lettera e l’altra, su una curva CustomEase che arriva morbida. Al 95% dell’apertura la riga si apre (overflow: visible) e le lettere possono uscirne; si richiude solo sotto l’88%, così sul bordo non sfarfalla.
Quale lettera
La lettera sotto il puntatore è quella su cui sta, misurata con offsetLeft e offsetWidth, che non risentono delle trasformazioni; fra due lettere vale la più vicina. Lo spazio non conta: le vicine di «d» sono «o» e «c». Prima di tutto si controlla che il puntatore sia dentro la parte visibile del piede, altrimenti le lettere tornano a posto.
Quanto si allunga
La distanza verticale fra il puntatore e la riga, moltiplicata per REACH (un quarto per la lettera sotto, un ottavo per le vicine), dice di quanto si sposta lo span interno. L’inclinazione viene dalla distanza orizzontale dal centro della lettera, fino a LEAN gradi, nel verso che la porta verso la mano. Il colore è fisso per lettera, dall’elenco COLORS. Ogni cambio è un tween di PAINT secondi con overwrite auto, e solo se il valore cambia davvero.
La mano invisibile
Dopo GHOST secondi senza puntatore sul piede, un ticker di GSAP muove un puntatore finto: avanti e indietro sulla larghezza del motto in 5,2 secondi, su e giù con un seno più veloce, sempre dentro il piede. Basta un movimento vero per spegnerlo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REACH | script.js | 0.25, 0.125 | Di quanto segue il puntatore la lettera sotto di lui, e di quanto le due vicine, come parte della distanza dalla riga. |
LEAN | script.js | 6 | Quanto si inclinano le lettere raggiunte verso il puntatore, in gradi. |
PAINT | script.js | 0.18 | I secondi che una lettera impiega a cambiare colore e altezza. |
SETTLE | script.js | 0.28 | I secondi che impiegano a tornare in riga quando il piede si richiude. |
RISE | script.js | 1.3 | Quanto sotto la riga aspettano le lettere prima che il piede si apra, in altezze di lettera. |
STAGGER | script.js | 0.04 | Il ritardo fra una lettera e la successiva mentre salgono, in secondi di una salita di 0,6. |
GHOST | script.js | 2.5 | I secondi senza puntatore prima che la mano invisibile giochi con le lettere. A 0 non arriva mai. |
COLORS | script.js | #d9643a, #7d8b4a, #9b6aa8, #e8a427, #3e8e8c | I colori delle lettere, uno per lettera, a turno. |
--sand | style.css | #e8dcc6 | Il colore del piede. |
--night | style.css | #1f2a22 | Il colore della sezione che scivola via. |
Quando usarla
Per il piede di qualunque sito che abbia un nome o un motto corto da far vedere in grande: due parole, al massimo una dozzina di lettere. Con una frase lunga le lettere diventano piccole e il gioco non si legge. Vuole un carattere pieno e lettere distinte; un corsivo legato si spezzerebbe nei punti di attacco.
Sul telefono
Il piede si scopre allo stesso modo scorrendo col dito. Toccando il motto e trascinando, le lettere seguono il dito; sul motto la pagina non scorre, sopra sì. Quando il dito si alza le lettere tornano in riga e, dopo due secondi e mezzo, arriva la mano invisibile.
Con il movimento ridotto
Il piede sta semplicemente sotto la pagina e le lettere sono già in riga. Sotto il puntatore prendono il colore ma non si spostano né si inclinano, e la mano invisibile non c’è.
Trappole
- Le proprietà CSS translate e rotate, guidate da variabili, sembravano il modo di separare la salita dal gioco col puntatore. Ma GSAP, appena prende un elemento, legge quelle proprietà, le somma al suo transform e le mette a none: le variabili cambiavano e le lettere restavano ferme. Servono due elementi, uno per GSAP e uno per l’altro movimento.
- Le code di g, p e y scendono sotto la riga: con overflow: hidden e l’interlinea stretta venivano tagliate, e a piede aperto finivano sopra la riga dei crediti. La riga ha 0,22 em di spazio sotto.
- Con una soglia sola, chi scorre piano intorno al 95% vedrebbe la riga aprirsi e chiudersi a ogni fotogramma: per questo si apre al 95% e si richiude all’88%.
- Sul telefono le barre di Safari cambiano l’altezza mentre si scorre e mandano resize: ricostruire tutto a ogni resize farebbe saltare il piede. Si ricostruisce solo se cambia la larghezza.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, CustomEase (GSAP) 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,1 KB; le librerie: GSAP + ScrollTrigger + CustomEase 49 KB.
Collaudo
Provata il 1 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.
