Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola sotto la pressa
Animazione di testo nello stile minimal: una parola in maiuscolo fra le due colonne sottili di una pressa. Il piatto vermiglio scende e la schiaccia sull’asse dell’altezza delle maiuscole, e l’inchiostro va di lato: le lettere si fanno più larghe e più nere. Risalendo le tira su, alte, strette e sottili come un capello, poi si staccano una dopo l’altra e tornano alla loro altezza su una molla. Il piatto si può anche trascinare.
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 word under the press</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>
<main class="stage" data-stage>
<!-- the press: two thin rods, the bed the word stands on and the plate that comes down. Every letter is a spring:
the plate squashes the caps (cap height axis), and the ink has to go somewhere, so they get wider and heavier -->
<i class="rod" data-rod aria-hidden="true"></i>
<i class="rod" data-rod aria-hidden="true"></i>
<i class="bed" data-bed aria-hidden="true"></i>
<div class="row" data-row>
<h1 class="word" data-word>PRESS</h1>
</div>
<i class="plate" data-plate aria-hidden="true"></i>
<!-- the dimension line: the cap height, measured live -->
<div class="dim" data-dim aria-hidden="true">
<i class="dim__line"></i>
<i class="dim__tick dim__tick--top"></i>
<i class="dim__tick dim__tick--bottom"></i>
<span class="dim__num" data-num>640</span>
</div>
<p class="foot" data-foot>
<span class="foot__brand">Platen Letterpress</span>
<span class="foot__axes" aria-hidden="true"><span>ytuc <b data-yt>640</b></span><span>wdth <b data-wd>100</b></span><span>wght <b data-wg>560</b></span></span>
</p>
<p class="hint" data-hint aria-hidden="true">Drag the press</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.
22 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 parola sotto la pressa» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo due colonne sottili grigie scendono dall’alto e una riga nera si stende sotto, il letto della pressa. Sopra la riga arriva la parola PRESS, in maiuscolo, lettera per lettera; in alto, fra le colonne, aspetta il piatto: una riga vermiglia. Il piatto scende, prima piano poi sempre più veloce, tocca le lettere e rallenta mentre le schiaccia: le maiuscole si abbassano davvero (il carattere ha un asse per l’altezza delle maiuscole), e siccome l’inchiostro deve andare da qualche parte diventano molto più larghe e più nere, con le aste che si allargano e le righe orizzontali che restano sottili. Il piatto rimbalza di un pelo e resta giù un momento. Poi risale piano, ma l’inchiostro è appiccicoso: le lettere restano attaccate e si allungano con lui, alte, strettissime e sottili come un capello. Arrivate in cima si staccano una dopo l’altra, dalle estremità verso il centro, e ricadono alla loro altezza su una molla, passandola di un niente e tornando su; il piatto torna in alto e tutto ricomincia. A destra una quota sottile misura l’altezza delle maiuscole e il suo numero cambia; in basso tre valori dicono gli assi della lettera centrale (ytuc, wdth, wght). Trascinando con il mouse o con il dito si porta giù il piatto a mano, quanto si vuole; lasciandolo, le lettere tornano su da sole.
Come funziona
Un carattere con l’altezza delle maiuscole
Roboto Flex, nel file «full» di Fontsource, ha oltre a peso e larghezza gli assi parametrici: YTUC è l’altezza delle maiuscole, da 528 a 760 millesimi del corpo, e YOPQ lo spessore delle righe orizzontali. Ogni lettera è uno span con il suo font-variation-settings, riscritto a ogni fotogramma solo se cambia, con «opsz» 144 perché solo lì la larghezza si stringe davvero.
L’inchiostro va di lato
Una funzione sola lega le tre cose: dall’altezza di riposo (640) verso il basso la larghezza sale fino a 146 e il peso fino a 730, verso l’alto la larghezza scende a 25 e il peso a 100. Schiacciate, le lettere tengono le righe orizzontali più sottili (YOPQ da 79 a 66) e si allontanano di un filo: con il peso pieno la E diventava un blocco nero e le S si chiudevano.
Ogni lettera è una molla
L’altezza di ogni lettera è una molla smorzata vera, integrata a passi di un duecentoquarantesimo di secondo dentro gsap.ticker (frequenza 2,4, smorzamento DAMPING). Il piatto è rigido: se una lettera è più alta dello spazio sotto il piatto viene spinta giù alla sua altezza e la sua velocità non può superare quella del piatto. Così l’urto, lo schiacciamento e il ritorno con il piccolo rimbalzo vengono da soli.
L’inchiostro appiccicoso
Quando il piatto risale le lettere sono «attaccate»: la loro altezza è quella del piatto, fino a 760. In cima una timeline GSAP le stacca una alla volta, dalle estremità verso il centro, ogni TACK secondi: da lì sono di nuovo molle libere e ricadono a 640. Il piatto lo muove la stessa timeline, con power2.in in discesa e power2.out mentre schiaccia.
Il piatto a mano
Premendo sulla pagina la timeline si ferma e il piatto segue il puntatore (un tween corto di 0,12 secondi, così il movimento è morbido) fra la pressione massima e la posizione di riposo. Lasciandolo torna su con power3.out e dopo poco meno di due secondi la pressa riparte da sola. La quota e i tre numeri leggono la lettera centrale a ogni fotogramma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'PRESS' | La parola sotto la pressa, in maiuscolo: la pressa schiaccia l’altezza delle maiuscole. |
SQUASH | script.js | 528 | Quanto in basso il piatto spinge le maiuscole, sull’asse dell’altezza: 528 è il minimo del carattere, a riposo sono a 640. |
STRETCH | script.js | 760 | Quanto in alto l’inchiostro appiccicoso tira le maiuscole quando il piatto risale: 760 è il massimo. |
DAMPING | script.js | 0.5 | Come tornano le lettere alla loro altezza: 0.2 ondeggiano molto, 1 si fermano secche. |
TACK | script.js | 0.09 | I secondi fra una lettera e la successiva che si stacca dal piatto. |
HOLD | script.js | 0.9 | Quanti secondi il piatto resta giù. |
SPEED | script.js | 1 | La velocità di tutta la pressa: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per mostrare un carattere o un marchio con un gesto solo: una stamperia, una tipografia a caratteri mobili, uno studio grafico, una fonderia, la parola di un prodotto che si presenta. Funziona con parole corte in maiuscolo (quattro-otto lettere), perché l’asse schiaccia l’altezza delle maiuscole.
Sul telefono
La stessa animazione: la parola si rimisura perché, schiacciata e larghissima, stia nello schermo con la quota accanto. Il piatto si trascina con il dito.
Con il movimento ridotto
Niente scende e niente rimbalza: la pressa compare in dissolvenza, poi la parola svanisce e ricompare già schiacciata con il piatto giù, e dopo un momento svanisce e torna com’era. Trascinando, il piatto segue il dito e le lettere seguono il piatto senza molla.
Trappole
- Con il peso pieno (1000) e le maiuscole al minimo dell’altezza la E diventava un rettangolo nero e le S si chiudevano: le righe orizzontali non hanno più spazio. Il peso schiacciato si ferma a 730 e YOPQ assottiglia le righe orizzontali, così gli occhielli restano aperti.
- L’asse YTUC c’è solo nel file «full» di Fontsource (o in «ytuc»): con «standard» o «wdth» le lettere non cambiano altezza e il piatto le attraversa.
- Il corpo lo decide la parola schiacciata, non quella a riposo: si misura a 100 px schiacciata, allungata e a riposo, e il corpo si sceglie perché la più larga stia fra le colonne con la quota accanto. Misurata a riposo, schiacciata usciva dalla pressa.
- Il piatto e le lettere vanno sulla stessa scala: l’altezza delle maiuscole in pixel è YTUC diviso 1000 per il corpo, e su quella scala sta anche il piatto, così la riga vermiglia tocca le lettere esattamente.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wdth, wght, YTUC e YOPQ) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,6 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.
