Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola impressa a secco
Animazione di testo nello stile minimal: un punzone sottile vermiglio preme una parola, lettera per lettera, in un biglietto di carta spessa. Le lettere non hanno colore, sono carta schiacciata che si vede solo per l’ombra e la luce dei bordi; a ogni colpo la carta cede con una molla e la lettera prende peso. Alla fine il punto, l’unica cosa in lamina.
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 blind-pressed word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card: the outer box is moved by GSAP, the sheet inside carries the paper and its shadow -->
<div class="card" data-card>
<div class="card__sheet" data-sheet></div>
</div>
<!-- the word: the script writes one box per letter, then the period in foil -->
<h1 class="word" data-word aria-label="relief"></h1>
</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.
13 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 impressa a secco» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo c’è un biglietto di carta spessa, un po’ più chiaro, con un’ombra morbida sotto. Dall’alto scende un punzone, una cornice sottile vermiglia alta quanto una lettera, e si ferma sopra il primo posto della parola «relief». Scende di colpo: dove ha toccato compare la lettera, che non ha inchiostro, è carta schiacciata, si vede per l’ombra lungo i bordi in alto a sinistra e la luce lungo quelli in basso a destra. La lettera affonda un poco oltre il suo punto e torna con una molla, si schiaccia di un niente e prende peso mentre affonda; il biglietto scende di un pixel e la sua ombra si stringe, poi torna. Il punzone si rialza, salta alla lettera dopo e la preme, e le lettere già impresse sentono il colpo, più piano quanto più sono lontane. Finita la parola il punzone sale, si allarga su tutta la parola e la ripassa con un colpo solo: tutte le lettere affondano insieme, un po’ più a fondo. Poi si fa piccolo, va dopo l’ultima lettera e preme il punto, che compare in lamina vermiglia, l’unica cosa colorata. Il punzone se ne va verso l’alto, la parola resta impressa per qualche secondo, poi la carta si rilassa: le lettere tornano piane una dopo l’altra, da sinistra a destra, e il punzone torna a premere.
Come funziona
Lettere senza colore
Ogni lettera ha lo stesso colore del biglietto: si vede solo per due text-shadow, una scura spostata in alto a sinistra e una bianca in basso a destra, come una cavità illuminata da sinistra. Una sola variabile, la profondità, decide lo spostamento delle ombre (in proporzione alla grandezza del carattere), la loro sfocatura, un niente di scuro nel colore e l’asse SOFT di Fraunces, che si indurisce quando la lettera è premuta.
Scatole che non si muovono
Fraunces non ha l’asse della larghezza, e quando una lettera prende peso si allarga e spinge le vicine. Ogni lettera ha allora una scatola larga quanto lei al peso più pieno, misurata con measureText su una canvas con lo stesso carattere, e il glifo sta al centro: il peso cambia senza che nessuna lettera si sposti.
Il punzone conta in lettere
La timeline di GSAP non muove pixel ma numeri: su quale lettera sta il punzone (anche a metà fra due), quanto è alzato, quanto è allargato sulla parola intera. Una funzione sul ticker trasforma questi numeri nella cornice, leggendo le scatole delle lettere e la linea di base (una scatola alta zero allineata alla base): se la finestra cambia misura a metà, il punzone resta sulla lettera giusta.
Il colpo
Ogni colpo è un gruppo di tween allo stesso istante: la profondità va oltre il suo punto in 70 millesimi e torna con un elastic.out, il peso sale con un power2.out, la scatola si schiaccia di un niente e torna, il biglietto scende di un pixel e mezzo e la sua ombra si stringe. Le lettere già impresse ricevono un piccolo colpo in più, diviso per la distanza e sfalsato di 30 millesimi.
Il punto in lamina
Il punto ha il suo peso, più leggero, perché pieno di colore sembrerebbe un tondo. Il punzone sul punto si centra sull’inchiostro e non sulla scatola: measureText dà dove sta il glifo (actualBoundingBoxLeft e Right, Ascent), e la cornice diventa un quadratino intorno a lui.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'relief' | La parola impressa (fino a 10 lettere). |
DEPTH | script.js | 1 | Quanto è profonda l’impressione: 0.5 appena segnata, 2 incisa a fondo. |
PRESS | script.js | 0.4 | Secondi fra un colpo del punzone e il successivo. |
SPRING | script.js | 1 | Quanto la carta rimbalza dopo il colpo: 0 si ferma secca, 2 trema più a lungo. |
LIGHT | script.js | 330 | Il peso della lettera quando il punzone la tocca (100 a 900). |
HEAVY | script.js | 600 | Il peso della lettera a impressione finita (100 a 900). |
FOIL | script.js | true | Il punto finale in lamina vermiglia. |
REST | script.js | 2.6 | Secondi in cui la parola resta impressa prima che la carta si rilassi. |
Quando usarla
Per un titolo o un marchio che deve sembrare toccato con mano: l’apertura del sito di una cartoleria, di una tipografia o di uno studio di grafica, gli inviti di un matrimonio, la pagina di un hotel elegante o di un ristorante con il menu stampato a secco, un portfolio in bianco.
Sul telefono
La stessa animazione con le misure adattate: il biglietto è più alto che largo rispetto al computer, la parola riempie la sua larghezza e le ombre si accorciano con la grandezza del carattere.
Con il movimento ridotto
Niente si muove: il biglietto e la parola già impressa, col punto in lamina, compaiono in dissolvenza e restano fermi.
Trappole
- Fraunces non ha l’asse della larghezza: una lettera che prende peso si allarga e spinge le vicine, e la parola tremerebbe a ogni colpo. Ogni lettera ha una scatola fissa, larga quanto lei al peso più pieno.
- Il punzone sul punto era spostato a sinistra: il punto non sta al centro della sua scatola. Si misura dove sta l’inchiostro con actualBoundingBoxLeft e Right e si centra lì.
- Al peso pieno il punto vermiglio sembrava un tondo colorato appoggiato alla parola: ha un peso suo, più leggero.
- Sul telefono in verticale il biglietto con le proporzioni del computer era una striscia: in verticale il rapporto fra larghezza e altezza scende da 1,62 a 1,2.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 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.
