Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il manifesto che si asciuga
Scorri dentro l’anteprima
Il manifesto di uno studio corretto davanti a te mentre scorri: una penna rossa sottile cancella le parole di troppo, che scivolano via, e le righe si ricompongono. Tre passate, finché resta solo la frase essenziale, grande. 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>The manifesto that trims itself</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the manifesto of a made-up studio, edited in front of you: as you scroll a thin red pen strikes the words it does
not need, they slide away and the lines close up, three times, until only the essential sentence is left, large.
The text and its edits are written in MANIFESTO, at the top of script.js -->
<main>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Halde</p>
<p class="conto"><span class="conto__numero" data-conto>0</span> words</p>
</header>
<div class="foglio" data-foglio>
<!-- the whole manifesto for screen readers; the script writes it here and draws the words on its own layer -->
<p class="manifesto" data-manifesto></p>
</div>
<nav class="voci" aria-label="The edits">
<span class="voce" data-voce>Draft</span>
<span class="voce" data-voce>Edit</span>
<span class="voce" data-voce>Cut</span>
<span class="voce" data-voce>Final</span>
</nav>
</div>
</section>
<section class="coda">
<p class="coda__testo">Halde is a design studio<br>that removes things for a living.</p>
<p class="piccolo">Manifesto, 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.
24 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 «Il manifesto che si asciuga» da Animorio e adattala al mio sitoCosa fa
Il manifesto di uno studio di design inventato, Halde, su un bianco caldo con l’inchiostro nero e un solo rosso. All’arrivo le parole salgono al loro posto riga dopo riga. Poi lo schermo si ferma e, scorrendo, il testo viene corretto in tre passate, come su una bozza. In ogni passata una penna rossa sottilissima cancella le parole che non servono, in ordine di lettura: va alla stessa velocità per ogni lettera, attraversa anche lo spazio quando cancella più parole di seguito e si alza fra un tratto e l’altro. Le parole cancellate diventano grigie, poi scivolano giù e un poco a destra, inclinandosi, e spariscono. Quelle rimaste vanno al loro posto nuovo, un poco più grandi ogni volta: le righe si richiudono e il testo si legge sempre come una frase intera. Una parola che cambia riga si fa trasparente mentre attraversa le altre. Dopo l’ultima passata le quattro parole rimaste si raccolgono su una riga sola, poi crescono fino a riempire lo schermo: quelle che vanno a capo prima scendono alla loro riga e poi ci scivolano lungo, così nessuna passa sopra un’altra; intanto la prima lettera diventa maiuscola. Arrivate, prendono peso con un assestamento elastico e il punto finale diventa rosso con un piccolo colpo. In alto il conto delle parole scende da 36 a 4, in basso si accendono a turno i nomi delle passate. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Il testo con le sue correzioni
Tutto il manifesto sta in una stringa, MANIFESTO: le parole separate da spazi, con ^1, ^2 o ^3 quelle da cancellare in quella passata, =Say per come si scrive una parola alla fine e / per andare a capo nella frase finale. La punteggiatura è una parola a sé che si attacca a quella prima: così una virgola può restare anche quando spariscono le parole che aveva accanto. Lo script ne fa un elemento per parola, su uno strato sopra il foglio.
Le copie nascoste
Per ogni momento del racconto (il testo intero, dopo la prima e la seconda passata, la riga sola, la frase finale) c’è una copia invisibile del testo con solo le parole che restano, alla sua grandezza (SIZES). È il browser a impaginarla, a capo compresi; lo script legge con getBoundingClientRect dove cade ogni parola, la sua larghezza e la sua riga. Se una copia non ci sta nel foglio si rimpicciolisce finché ci sta, poi si centra in altezza.
Numeri al posto delle proprietà
La timeline, legata allo scorrimento con scrub SCRUB, non sposta elementi: per ogni parola muove numeri da 0 a 1, uno per spostamento più quello dell’uscita. Una funzione, chiamata una volta per fotogramma dall’onUpdate della timeline, mette ogni parola fra il posto di prima e quello dopo con translate e scale, con la curva MOVE. Siccome i posti si rileggono a ogni refresh, il racconto regge anche al ridimensionamento della finestra.
La penna
Il tratto è un elemento dentro la parola, alto STROKE pixel, che cresce con scaleX da sinistra. Sta a metà delle lettere piccole: la linea di base e l’altezza della x si leggono da un canvas con measureText. La sua durata è PEN per lettera e i tratti di parole vicine si seguono senza pausa, allungati fino alla parola dopo quando è sulla stessa riga: sembra una riga sola tirata a mano.
Senza incroci
Le parole che passano da una riga all’altra rischiano di attraversare le altre. Durante le passate si fanno trasparenti a metà strada; prima della frase finale le parole si raccolgono su una riga sola (quella che sale scorre prima lungo la sua riga vuota), e crescendo chi va a capo scende prima e scivola poi, con la scala legata allo scivolamento, partendo dall’ultima parola. Alla fine una variabile CSS porta il peso del carattere variabile da LIGHT a BOLD con elastic.out e l’asse opsz verso il taglio da titolo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MANIFESTO | script.js | 'We^3 would^3 honestly^1 like^3 to^3 say=Say ...' | Il testo con le sue correzioni: parola^1, ^2 o ^3 si cancella in quella passata, una parola senza segno resta; =X è come si scrive alla fine, / va a capo nella frase finale. |
SIZES | script.js | [1, 1.1, 1.28, 4.4] | Quanto è grande il testo dopo ogni passata, in volte la grandezza di partenza; l’ultimo numero è la frase finale (si stringe da sola se non ci sta). |
PEN | script.js | 0.05 | Quanto ci mette la penna per ogni lettera che cancella, in passi del racconto. |
STROKE | script.js | 1.5 | Lo spessore del tratto di penna, in pixel. |
MOVE | script.js | 'power3.inOut' | La curva con cui le parole vanno al loro posto nuovo. |
LIGHT | script.js | 330 | Il peso del manifesto. |
BOLD | script.js | 540 | Il peso su cui si posa la frase finale. |
SCRUB | script.js | 0.8 | Quanti secondi ci mettono le parole a raggiungere lo scorrimento. |
Quando usarla
Per il manifesto o la pagina «chi siamo» di uno studio, il lancio di un prodotto che si vanta di essere semplice, l’apertura di un articolo sulla scrittura: un testo lungo che si riduce alla sua idea. Funziona con una o due frasi, fino a una quarantina di parole; la frase finale va tenuta corta, da due a sei parole.
Sul telefono
Uguale: il testo va a capo più spesso e la frase finale si stringe da sola alla larghezza dello schermo.
Con il movimento ridotto
Niente penna né spostamenti: ogni passata è già scritta e, scorrendo, le versioni si danno il cambio con una dissolvenza fino alla frase finale col punto rosso; il conto delle parole e i nomi in basso cambiano insieme.
Trappole
- Con le parole che cambiano riga, una semplice interpolazione fra due impaginazioni le fa passare una sopra l’altra: nella frase finale «mean» e «more» si scambiavano di posto e si sovrapponevano. Serve un passaggio in mezzo, la riga sola, e un ordine per gli assi: chi sale scivola prima e sale poi, chi scende scende prima e scivola poi.
- Se la scala cresce con una curva e la posizione con un’altra, una parola che si allarga invade quella accanto prima che si sposti. Sulla stessa riga posizione e scala devono seguire la stessa curva: allora lo spazio fra due parole è una media di due spazi giusti e non va mai sotto zero.
- La frase finale è misurata già col peso BOLD, ma le parole viaggiano col peso LIGHT, più stretto: se il peso cresce solo dopo l’arrivo, per un attimo virgola e punto restano staccati dalle loro parole. Il peso parte quasi un secondo prima che le parole si posino e l’elastico chiude gli spazi mentre arrivano.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Newsreader (font variabile) 5.3.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 14 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.
