Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La pagina alla macchina da scrivere
Una macchina da scrivere vista dall'alto scrive una lettera per un caffè letterario inventato: i martelletti battono le lettere con l'inchiostro irregolare del nastro, il carrello scorre, la leva lo fa tornare con lo scatto, una parola sbagliata finisce sotto le X. Alla fine il foglio viene strappato fuori e vola sul tavolo. Un clic: pagina nuova.
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 typewritten page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/special-elite@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script fills it with the table, the typewriter, the sheet and the letters -->
<svg class="palco" data-stage role="img" aria-label="A letter from The Inkwell Cafe, typed on a typewriter" xmlns="http://www.w3.org/2000/svg">
<g data-world></g>
</svg>
<p class="nota" data-hint>Click for a new page</p>
</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.
35 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 pagina alla macchina da scrivere» da Animorio e adattala al mio sitoCosa fa
Su un tavolo di noce c'è una macchina da scrivere verde, vista dall'alto come la vede chi scrive, con accanto una tazza di caffè e una matita. Si alza la barra del foglio, un foglio bianco scende dall'alto dentro il rullo, la manopola lo fa salire con due scatti e la barra si richiude con un piccolo rimbalzo. Poi si scrive: a ogni lettera il suo tasto si abbassa e torna su con un elastico (le maiuscole premono anche il tasto delle maiuscole), un martelletto si alza dal cesto, si avvicina e batte sul foglio, il nastro rosso e nero si solleva davanti alla lettera e le bobine girano di un poco. La lettera resta sul foglio con l'inchiostro del nastro: chi più chiara in alto, chi in basso o di lato, chi più carica, con i bordi sbavati e qualche puntino scoperto. A ogni battuta il carrello scatta di un passo verso sinistra. A fine riga la leva si abbassa, il foglio sale di una riga mentre la manopola gira, e il carrello torna indietro di corsa e sbatte contro il margine con un rimbalzo che fa tremare la macchina. Nella quinta riga chi scrive sbaglia una parola: si ferma, torna indietro col tasto apposito una lettera alla volta, ci batte sopra le X e scrive quella giusta. Il testo è la lettera di un caffè letterario inventato, The Inkwell Cafe: «Dear reader, the kettle is on and the chairs are waiting. Poems at eight, pie at nine. Yours, Ida». Finita la lettera, la barra si alza, la manopola fa tre scatti e il foglio viene strappato fuori con un colpo; vola sopra la macchina, si avvicina come se si alzasse, ricade sul tavolo girandosi, scivola un poco e si ferma, mentre il carrello vuoto torna a capo. Dopo qualche secondo il foglio scivola via fuori dal tavolo ed entra un foglio nuovo. Un clic in qualsiasi momento strappa fuori la pagina com'è e ne mette una nuova, con l'inchiostro ogni volta un po' diverso.
Come funziona
Il testo diventa una lista di gesti
TEXT si spezza a ogni barra in righe e ogni riga diventa una lista di gesti: lettera, spazio, pausa, tasto indietro. Una parola fra parentesi quadre è uno sbaglio: si batte, si aspetta un attimo, si torna indietro di tante colonne quante sono le sue lettere, si battono altrettante X sopra e poi uno spazio. Ogni gesto sa la sua colonna, e la colonna dice dove sta il carrello: a ogni colonna si sposta a sinistra di una larghezza di lettera, misurata su una canvas col carattere Special Elite.
Un martelletto visto dall'alto
I trentadue martelletti sono linee da un perno su un arco (il settore) a una testa ferma sul feltro, più in fuori sullo stesso raggio. Per battere, la testa va dritta dal feltro al punto di stampa: visto dall'alto passa sopra il perno, quindi la linea si accorcia e poi si riallunga dall'altra parte, proprio come un martelletto che si alza in piedi e ricade in avanti. Un tween su un numero da 0 a 1 ridisegna linea e testa a ogni fotogramma; a metà corsa la linea si fa più spessa e la testa più grande, perché è più vicina a chi guarda.
L'inchiostro irregolare
Ogni lettera è un testo SVG a sé, con un piccolo spostamento, una piccola rotazione e una sua opacità finale presi da un numero a caso con un seme: la stessa pagina viene battuta sempre uguale, un clic cambia il seme. Il colore è uno di cinque gradienti (pieno, più chiaro in alto, in basso, a sinistra o a destra), come un nastro consumato da una parte. Sopra ogni riga c'è un filtro: feTurbulence fa il rumore, feDisplacementMap sbava i bordi e una feColorMatrix lo trasforma in buchi nell'alfa, cioè i puntini dove l'inchiostro non è arrivato.
Il carrello e il rullo
Il foglio sta dentro il carrello, in un gruppo con un clipPath che finisce al bordo del rullo: sotto quella linea il foglio sparisce nella macchina, e quando entra o viene strappato fuori si vede proprio nascere o finire lì. A capo la leva ruota, il foglio sale di una riga con un back.out e il carrello torna a zero con power2.in, poi rimbalza di sei unità con un elastico e la macchina trema. Gli zigrini delle manopole scorrono di passi interi del loro intervallo, così finiscono sempre dove sono partiti e la manopola sembra girare all'infinito.
Lo strappo e il volo
Strappato il foglio oltre il bordo del rullo, lo script lo sposta dal carrello a un gruppo sopra tutto, aggiungendo alla sua x lo spostamento del carrello, così non salta. Vola con x, y, rotazione e una scala che prima cresce (si alza) e poi cala (ricade), con l'ombra che si allontana e torna sotto. Quando tocca il tavolo passa nel gruppo sotto la macchina e scivola ancora un poco. La storia è fatta di quattro timeline in fila (entra, scrivi, strappa, riposa): un clic uccide quella che corre e fa partire lo strappo dal punto in cui si trova.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEXT | script.js | 'THE INKWELL CAFE//Dear reader,/the kettle is on and/the chairs are waiting./[Peoms]Poems at eight,/pie at nine.//Yours, Ida' | La pagina: una barra va a capo, due barre lasciano una riga vuota, una parola fra [parentesi quadre] viene battuta per sbaglio e coperta di X. Righe corte, fino a una trentina di lettere. |
SPEED | script.js | 1 | La velocità di chi scrive e di tutta la storia: 2 è il doppio, 0.5 la metà. |
INK | script.js | 1 | Quanto è consumato il nastro: 0 lettere pulite e uguali, 1 inchiostro irregolare, 2 molto sbiadito e sbavato. |
SPACING | script.js | 1.35 | L'interlinea, in altezze di lettera: di quanto sale il foglio a ogni a capo. |
REST | script.js | 3 | Quanti secondi la pagina resta sul tavolo prima che entri un foglio nuovo. |
TILT | script.js | -8 | Di quanti gradi si gira la pagina quando atterra sul tavolo. |
Quando usarla
Per l'apertura del sito di una libreria, di un caffè letterario, di una rivista, di uno scrittore o di una casa editrice, per la pagina dei contatti («scrivici una lettera»), per un invito o un caricamento lungo. Funziona con testi brevi, da una a dieci righe corte.
Sul telefono
La stessa storia con le misure adattate: su uno schermo alto la macchina prende tutta la larghezza, il carrello esce un poco dai lati quando arriva in fondo alla riga e la pagina atterra sul tavolo sopra la macchina. Un tocco strappa la pagina e ne mette una nuova.
Con il movimento ridotto
Niente si muove: il foglio compare in dissolvenza già al suo posto, le righe compaiono una dopo l'altra con il loro inchiostro irregolare e lo sbaglio già coperto di X, poi il foglio sparisce dalla macchina e ricompare sul tavolo, e si ricomincia.
Trappole
- In una timeline ogni fromTo, se non gli si dice immediateRender: false, mette subito il suo valore di partenza: con centinaia di battute sugli stessi oggetti (carrello, tasti, martelletti) il risultato all'avvio era il punto di partenza dell'ultima battuta, col carrello già in fondo alla riga.
- Il foglio che esce dalla macchina va spostato in un gruppo sopra tutto, ma il suo x era misurato dentro il carrello: senza aggiungere lo spostamento del carrello saltava di mezza pagina. Spostato al momento giusto, quando è tutto sopra il bordo del rullo, il passaggio non si vede.
- Un foglio sul tavolo deve stare sotto la macchina, che è più alta: se atterra sopra la macchina e poi cambia gruppo, sparisce di colpo dietro la leva. Il punto d'atterraggio è scelto lontano dalla macchina, e solo lo scivolone finale può andare sotto.
- Il filtro dell'inchiostro su ogni lettera faceva ridisegnare centinaia di filtri a ogni passo del carrello: va messo sulla riga intera, e il disordine di ogni lettera lo danno gradiente, opacità, spostamento e rotazione.
- Con lettere disegnate a caso il video in loop non trovava mai il punto in cui ricomincia: il caso ha un seme fisso, e un clic lo cambia.
Librerie
GSAP 3.15.0, Special Elite (font) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
