La parola dietro il vetro cannettato
WebGL, Testo, Hover
NuovaGratis
Torna alla libreria
La parola d’acquerello sulla carta bagnata
Titolo animato in WebGL, nello stile minimal: una parola dipinta in blu oltremare con una pennellata sola su un foglio di carta da acquerello, che asciuga davvero, col colore che si posa nella grana e si raccoglie sul bordo. Il puntatore è un pennello con l’acqua pulita che riapre il colore asciutto; un tocco lascia cadere una goccia che si allarga.
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>Torchon</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a word painted in watercolour on cold press paper: it blooms and dries with dark edges; the pointer is a brush
with clean water that reopens the paint, a tap lets a drop fall -->
<main class="pagina" data-pagina>
<canvas class="foglio" aria-hidden="true" data-foglio></canvas>
<div class="ripiego" aria-hidden="true"><span data-ripiego>Bloom</span></div>
<h1 class="parola" data-parola>Bloom</h1>
<header class="testa">
<p class="marchio" data-entra>Torchon</p>
<p class="testa__nota" data-entra>Cold press watercolour paper</p>
</header>
<footer class="piede">
<p class="nota" data-entra data-nota>Brush with water to reopen the paint, tap for a drop</p>
<div class="piede__destra" data-entra>
<p class="stato">Paint <span data-stato>wet</span></p>
<button class="pillola" type="button" data-nuovo><span>New sheet</span></button>
</div>
</footer>
</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.
21 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 d’acquerello sulla carta bagnata» da Animorio e adattala al mio sitoCosa fa
Un foglio di carta da acquerello a grana grossa, bianco caldo, di Torchon, una cartiera inventata, con la parola Bloom in un carattere con le grazie. La parola si dipinge con una pennellata sola, da sinistra a destra, con il bordo della passata un poco mosso, in blu oltremare, l’unico colore. La carta è bagnata e il colore vive: si allarga appena oltre le lettere, a tratti sbava dove intorno c’è più acqua, si posa di più nelle valli della grana e, mentre la carta asciuga, si raccoglie sul fronte dell’acqua, che resta un poco più scuro, come nell’acquerello vero. Il puntatore è un pennello con l’acqua pulita: passandoci sopra la carta si bagna di nuovo, il colore già asciutto si riapre e scivola verso il bordo della macchia; un tocco lascia cadere una goccia che si allarga in un fiore. In basso la scritta dice se il colore è bagnato, si asciuga o è asciutto, e una pillola chiede un foglio nuovo: il vecchio si copre di carta pulita e la parola si ridipinge. Quando nessuno tocca, una mano finta passa il pennello sulla parola, lascia cadere una goccia e poi prende un foglio nuovo.
Come funziona
Tre quantità per ogni punto
La simulazione vive in due tessiture WebGL 2 a mezza precisione che si passano il testimone a ogni passo. In ogni texel ci sono l’acqua, da asciutto a pozza, il colore sciolto nell’acqua e il colore già posato sulla carta. Si fanno PASSI passi per fotogramma, sempre gli stessi, così il risultato non dipende da quanto è veloce il computer.
La pennellata
La parola si disegna bianca su nero in un canvas grande quanto la simulazione e diventa una maschera. All’inizio le lettere ricevono acqua e colore, e intorno la carta si bagna solo a tratti, dove un rumore lento lo decide: lì il colore sbava, altrove il bordo resta netto. La passata da sinistra a destra è solo nel disegno, con un fronte sfumato e mosso, così la simulazione non ha cuciture.
L’acqua e il colore
A ogni passo l’acqua si allarga piano ed evapora, più in fretta sulle creste della grana. Il colore sciolto si allarga solo fra due punti bagnati tutti e due, e scivola verso il punto più asciutto: per questo si raccoglie sul fronte dell’acqua. Si posa un poco sempre, di più nelle valli della grana, sul fronte dell’acqua e quando l’acqua finisce; l’acqua nuova riapre un poco il colore posato.
Il pennello e la goccia
Il pennello aggiunge acqua pulita lungo il tratto percorso fra un fotogramma e l’altro, diviso nei passi, tanta quanta è la corsa: fermo non allaga la carta, premuto ne lascia di più. La goccia cresce in mezzo secondo fino alla sua misura e lascia una pozza: il colore riaperto scappa verso il bordo e lascia il fiore.
Il disegno
La carta ha una grana a tre scale illuminata da sinistra in alto, ed è appena più scura dove è bagnata. Il pigmento la tinge per sottrazione, come un velo trasparente: il colore è la carta moltiplicata per l’oltremare, quanto più è carico tanto più si vede, e un poco di più nelle valli della grana.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Bloom | La parola dipinta. |
WATER | script.js | 1 | Quanta acqua lascia il pennello del puntatore. |
BRUSH | script.js | 26 | Quanto è largo il pennello, in px. |
DRY | script.js | 1 | Quanto in fretta asciuga la carta: più alto, prima. |
BLEED | script.js | 1 | Quanto il colore si allarga nell’acqua. |
EDGE | script.js | 1 | Quanto il colore si raccoglie sul bordo della macchia, scurendolo. |
GRAIN | script.js | 1 | Quanto si vede la grana della carta. |
WEIGHT | script.js | 620 | Il peso della parola. |
Quando usarla
Come titolo dell’apertura di un negozio di belle arti, di una cartiera, di un corso di acquerello, del portfolio di un illustratore o di un pittore; nella pagina di un museo o di una mostra; in una pagina d’arte dove il titolo si deve poter toccare.
Sul telefono
La stessa animazione: la parola si misura sulla larghezza e sull’altezza e resta dentro la casella, la simulazione lavora a un texel per pixel; il dito trascinato è il pennello, un tocco lascia la goccia, e la frase in basso lo dice con parole più corte.
Con il movimento ridotto
La parola è già dipinta e asciutta, calcolata fuori scena: niente pennellata, niente mano finta. Le scritte compaiono in dissolvenza; il pennello resta, solo se lo si usa.
Trappole
- Le tessiture a mezza precisione si possono disegnare solo con l’estensione EXT_color_buffer_float: senza, resta la parola in CSS.
- Una pennellata fatta nella simulazione, colonna per colonna, lascia cuciture verticali dove si ferma fra un fotogramma e l’altro: la parola si bagna tutta subito e la passata si fa solo nel disegno.
- Il colore che scivola verso il punto più asciutto svuota il centro delle lettere se è troppo forte: le lettere diventano contorni. Lo si tiene basso e si fa posare un poco di colore sempre.
- Un alone d’acqua di misura fissa sfoca le lettere piccole del telefono: è proporzionale al corpo della parola.
- Un rumore fatto con una sola fract allineata sugli assi lascia righe verticali nella grana: serve un hash che mescoli tutte e due le coordinate.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
