Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La frase battuta sul righello
Scorri dentro l’anteprima
Una nota breve battuta a macchina mentre scorri, nello stile minimal: un righello sottile con un segno rosso che avanza di una colonna a ogni tasto, le lettere che cadono leggere e prendono peso atterrando, e a fine riga il carrello che torna indietro con una molla mentre la carta sale di una 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 line typed on the ruler</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a short note of a made-up small press, typed as you scroll: a thin ruler with a red carriage mark that steps one
column at a time; at every step a letter is struck onto the line and gains weight as it lands; at the end of a
line the carriage springs back to the margin and the paper rises by one line. The lines are in LINES, at the top
of script.js -->
<main>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Pica</p>
<p class="piccolo">A note on writing</p>
</header>
<!-- the whole note for screen readers; the script writes it here and strikes the letters on their own layer -->
<p class="nota" data-nota></p>
<div class="macchina" aria-hidden="true">
<div class="carta" data-carta></div>
<div class="righello" data-righello>
<span class="righello__linea" data-linea></span>
<span class="carrello" data-carrello><span class="carrello__segno" data-segno></span></span>
</div>
</div>
<p class="piccolo invito" data-invito>Scroll to type</p>
</div>
</section>
<section class="coda">
<p class="coda__testo">Pica is a small press<br>for slow writing.</p>
<p class="piccolo">Notes, 2026</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.
19 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 frase battuta sul righello» da Animorio e adattala al mio sitoCosa fa
Su un bianco caldo, con l’inchiostro nero e un solo rosso, c’è soltanto un righello sottile: una riga a filo con una tacca per ogni colonna, più lunga ogni cinque, e sotto i numeri 0, 5 e 10. All’arrivo la riga si disegna da sinistra, le tacche scendono una dopo l’altra con un piccolo rimbalzo e il segno rosso del carrello cade sul margine con una molla. Poi lo schermo si ferma e, scorrendo, si batte la nota di una piccola casa editrice inventata, Pica: «Write slowly. Read it twice. Keep it short.». A ogni tasto la lettera cade sulla riga appena sopra il righello, stretta, sottile e trasparente, sempre più veloce; atterrando si schiaccia appena e prende larghezza e peso con un assestamento elastico, che va un filo oltre e torna. Nello stesso istante la tacca sotto di lei salta, il segno rosso si allunga di un soffio e la lettera prima sente il colpo e si abbassa di un pixel. Poi il carrello avanza di una colonna, un pixel oltre e indietro; lo spazio lo fa avanzare senza battere. Finita la riga, il carrello corre indietro sempre più veloce, le tacche si alzano una alla volta mentre ci passa sopra, sbatte contro il margine con una molla, il righello trema e la carta sale di una riga, con le righe già scritte. Dopo l’ultima riga il punto finale diventa rosso con un piccolo colpo. Lo scorrimento dice quanti tasti sono battuti, ma ogni tasto si gioca nel suo tempo, come una persona che scrive e cerca di stare dietro: chi scorre veloce vede battere più in fretta, chi si ferma vede sempre le lettere posate. Tornando su, le lettere si staccano una alla volta e il carrello torna indietro.
Come funziona
Le righe in colonne
La nota sta in LINES, una stringa per riga. Il carattere è monospaziato e variabile (Martian Mono, con gli assi di peso e di larghezza), quindi ogni lettera ha la sua colonna: lo script ne fa un elemento per lettera, largo una colonna, e misura con un canvas quanto è larga una cifra per ricavare la colonna dalla larghezza dello schermo (e, se serve, dall’altezza). Il righello ha una colonna in più della riga più lunga: è dove si ferma il carrello.
Lo scorrimento conta i tasti
Ogni tasto (lettera, spazio, ritorno a capo) ha la sua parte di scorrimento: un ritorno ne vale quasi due. Un ScrollTrigger senza scrub legge a che punto è la sezione e ne ricava quanti tasti dovrebbero essere battuti. Non c’è una timeline trascinata dallo scorrimento: un elastico trascinato si fermerebbe a metà quando chi scorre si ferma, con una lettera ancora stretta o il carrello fra due colonne.
Chi batte a macchina
Una piccola coda gioca un tasto alla volta verso quello chiesto dallo scorrimento, mai più in fretta di PACE secondi per tasto, con gsap.delayedCall (così resta nel tempo di GSAP). Se lo scorrimento corre troppo avanti, i tasti in più si mettono di colpo e gli ultimi sei si giocano ancora; tornando su la coda va all’indietro e toglie le lettere.
Il colpo
Una lettera parte da yPercent -DROP, larga NARROW e di peso LIGHT, e cade con power3.in. Atterrando si schiaccia con scaleX e scaleY e prende peso e larghezza con elastic.out: gli assi passano da due variabili CSS dentro font-variation-settings, che GSAP anima come numeri. Intanto la tacca sotto salta (un elemento interno, perché quello esterno lo usa l’entrata), il segno si allunga e la lettera prima scende di 1,2 pixel e torna.
Il ritorno a capo
Il carrello è un numero in colonne: lo disegna una funzione sola insieme alla carta e al tremito del righello, così regge al ridimensionamento. Al ritorno corre a -0,14 colonne con power3.in, le tacche si alzano nel momento esatto in cui il segno ci passa sopra (l’inverso della curva cubica), poi elastic.out con SPRING lo riporta a zero, il righello trema di due pixel e la carta sale di una riga con back.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINES | script.js | ['Write slowly.', 'Read it twice.', 'Keep it short.'] | La nota, una stringa per riga. Meglio righe corte, fino a una ventina di lettere: la colonna si stringe da sola per stare nello schermo. |
LIGHT | script.js | 130 | Il peso di una lettera mentre cade. |
WEIGHT | script.js | 560 | Il peso su cui la lettera si posa. |
NARROW | script.js | 75 | Quanto è stretta una lettera mentre cade (l’asse della larghezza, da 75 a 100). |
DROP | script.js | 70 | Da quanto in alto cade una lettera, in percento di una riga. |
PACE | script.js | 0.11 | Il massimo della velocità quando lo scorrimento corre avanti, in secondi per tasto. |
SPRING | script.js | 0.35 | Quanto è molle il carrello quando sbatte contro il margine: più alto, più oscilla. |
Quando usarla
Per la pagina di chi scrive (una casa editrice, una newsletter, un blog), il manifesto breve di uno studio, l’apertura di un articolo, la frase di benvenuto di un sito che vuole sembrare fatto a mano. Funziona con due-quattro righe corte.
Sul telefono
Uguale: la colonna si stringe alla larghezza dello schermo, e le lettere, il righello e i colpi sono gli stessi.
Con il movimento ridotto
Niente cadute, carrello né carta che sale: la nota è già al suo posto sopra il righello col peso pieno e il punto rosso, e le lettere compaiono con una dissolvenza una dopo l’altra mentre scorri.
Trappole
- Con una timeline trascinata dallo scorrimento (scrub) gli elastici si fermano dove si ferma chi scorre: le lettere restavano strette a metà assestamento e il carrello fra due colonne. Lo scorrimento deve dire solo quanti tasti, e ogni tasto va giocato nel suo tempo.
- Una chiamata ritardata che fa avanzare il carrello, se chi scorre torna su subito, parte dopo il passo indietro e lo riporta avanti: va messa nella timeline della lettera e uccisa con lei quando la lettera si toglie.
- La tacca ha due elementi: quello esterno cresce all’entrata, quello interno salta ai colpi. Con un elemento solo, un colpo durante l’entrata la lasciava a metà altezza.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Martian Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 15 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.
