Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
L’inchiostro asciugato col tampone
Scorri dentro l’anteprima
Una parola appena scritta a inchiostro fresco, pesante e morbida, con un riflesso che ci scorre sopra. Scorrendo, un tampone asciugainchiostro la attraversa dondolando, la riga di base cede sotto il suo peso e ogni lettera esce asciutta: leggera, netta, con un piccolo respiro. Alla fine il tampone si solleva, si gira e mostra le lettere che ha preso, a specchio e in blu. 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>Ink blotted dry</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a word just written in fresh ink, heavy and soft; as you scroll a rocker blotter rolls across it and every letter
comes out dry, light and sharp. At the end the blotter lifts, turns over and shows the ink it took, mirrored.
The word and the numbers are in the values at the top of script.js -->
<main>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Quire</p>
<p class="sezione">Writing room</p>
</header>
<div class="foglio">
<div class="riga" data-riga>
<!-- the word for screen readers; the script splits it into letters -->
<p class="parola" data-parola aria-label="Sincerely"></p>
<svg class="base" data-base aria-hidden="true" preserveAspectRatio="none">
<path class="base__linea" data-base-linea d="" />
<g data-tacche></g>
</svg>
<div class="tampone" data-tampone aria-hidden="true">
<div class="tampone__giro" data-giro>
<div class="tampone__faccia tampone__faccia--sopra">
<span class="tampone__piastra" data-piastra></span>
<span class="tampone__pomo" data-pomo></span>
</div>
<div class="tampone__faccia tampone__faccia--sotto" data-impronta></div>
</div>
</div>
</div>
</div>
<footer class="piede">
<p class="cenno" data-cenno>Scroll to blot the ink</p>
<p class="stato"><span class="stato__nome">Ink</span> <span class="stato__valore" data-stato>wet</span></p>
</footer>
</div>
</section>
<section class="coda">
<p class="coda__testo">Quire sells writing paper,<br>nibs and rocker blotters.</p>
<p class="piccolo">Letters that dry before you fold them</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 «L’inchiostro asciugato col tampone» da Animorio e adattala al mio sitoCosa fa
La pagina è quella di Quire, un negozio di cancelleria inventato. Al centro, sulla carta bianco caldo, compare la parola «Sincerely», scritta lettera per lettera da sinistra come da una penna: è inchiostro fresco, nero, molto pesante, con i bordi morbidi e un alone appena sbavato, e un riflesso chiaro le scorre sopra ogni tanto. Sotto c'è la riga di base sottile con una tacca fra una lettera e l'altra; in basso a destra la scritta «Ink wet». Scorrendo, il tampone asciugainchiostro, visto dall'alto (un rettangolo con la piastra e il pomello), lascia il suo posto sotto la parola, si raddrizza e si posa sulla prima lettera; poi attraversa la parola dondolando: la piastra scivola di lato, l'ombra segue il dondolio e la riga di base si abbassa un poco sotto il suo peso. Ogni lettera che il tampone scopre è asciutta: sottile, netta, senza alone né riflesso, e fa un piccolo respiro elastico; le lettere non si spostano, perché lo spazio che il segno perde va intorno a lui, e la tacca sotto si allunga. Alla fine il tampone si solleva, si sposta al centro sopra la parola e si gira: sotto, sulla carta assorbente, ci sono le lettere che ha preso, a specchio, blu e sovrapposte. «Ink» diventa «dry» in blu e il cenno dice «Dry, ready to fold». Scorrendo indietro tutto torna fresco.
Come funziona
Gli assi del carattere fanno l'inchiostro
Fraunces ha tre assi: peso (wght), grandezza ottica (opsz) e morbidezza (SOFT). L'inchiostro fresco è peso 820 e SOFT 100, che arrotonda gli angoli come una goccia che si allarga; asciutto è peso 420 e SOFT 0. Un text-shadow con il blur in em fa l'alone, e una copia della lettera con un gradiente in background-clip: text fa il riflesso che scorre.
Le lettere restano al loro posto
All'inizio e a ogni resize lo script misura ogni lettera bagnata e asciutta. Mentre asciuga, la lettera prende un padding-inline pari a metà della larghezza che perde: la parola resta lunga uguale e ogni lettera tiene il suo centro, così il tampone sa sempre dove sono.
Il tampone e il fronte che asciuga
Un solo tween con ScrollTrigger e scrub porta un numero da 0 a 1. Fino a 0,1 il tampone si posa, fino a 0,7 attraversa la parola, poi si solleva e gira. Il fronte che asciuga sta sotto il tampone, a un terzo della sua larghezza: ogni lettera asciuga con uno smoothstep largo 0,3 em intorno al suo centro, e il peso segue una curva back.out, quindi va un poco sotto il peso asciutto e torna.
Dondolio, ombra e riga che cede
Mentre corre il tampone ha una rotationY che oscilla di qualche grado (il dondolio, con la prospettiva sulla riga), la piastra scivola nel verso opposto e l'ombra è una variabile CSS ricalcolata a ogni fotogramma. La riga di base è un path SVG ridisegnato con una gaussiana sotto il centro del tampone: si abbassa dove pesa.
Il giro e l'impronta
Il tampone ha due facce con backface-visibility: hidden, quella di sotto già girata di 180 gradi. GSAP gira il contenitore con rotationX; sotto, ogni lettera ha la sua copia a specchio (scaleX(-1)) in un punto diverso, e la sua opacità cresce con quanto la lettera è asciutta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Sincerely' | La parola scritta a inchiostro fresco. |
WET | script.js | 820 | Il peso dell'inchiostro fresco. |
DRY | script.js | 420 | Il peso delle lettere asciutte. |
SOFT | script.js | 100 | Quanto sono morbidi i bordi bagnati (l'asse SOFT di Fraunces, da 0 a 100). |
BLEED | script.js | 0.03 | L'alone dell'inchiostro bagnato, in em. |
ROCK | script.js | 5 | Quanto dondola il tampone, in gradi. |
DIP | script.js | 0.035 | Quanto cede la riga di base sotto il tampone, in em. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette la parola a raggiungere lo scorrimento. |
WRITE | script.js | 1.2 | Quanto ci mette la parola a scriversi quando si apre la pagina, in secondi. |
Quando usarla
Per la pagina di un negozio di cancelleria, di uno studio di calligrafia o di un servizio di lettere e inviti, per la firma in fondo a una lettera o a una pagina «chi siamo», per l'apertura di un articolo sulla scrittura a mano. Funziona con una parola sola, da cinque a dieci lettere.
Sul telefono
Uguale: la parola si misura sulla larghezza e sull'altezza dello schermo, e il tampone resta sempre dentro la pagina.
Con il movimento ridotto
Niente tampone, niente spostamenti né riflesso: scorrendo le lettere asciugano una dopo l'altra al loro posto, perdendo peso e alone, e «Ink» diventa «dry».
Trappole
- Con il peso cambia la larghezza delle lettere: senza il padding che compensa, la parola si accorcia mentre asciuga e le lettere scivolano via da sotto il tampone.
- Il tampone parte appoggiato sotto la parola e non a sinistra: su un telefono a sinistra della parola non c'è abbastanza margine e uscirebbe dalla pagina.
- GSAP muove il tampone e gira il contenitore delle facce, due elementi diversi: il dondolio (rotationY) e il giro (rotationX) non si cancellano a vicenda.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,1 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 23 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.
