Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
Il pulsante d'inchiostro
Una pillola di carta di cotone con la grana e le fibre, e sopra una stilografica che segue il puntatore con una goccia d'inchiostro che si gonfia sul pennino. Al clic la goccia cade, scoppia in una corona e l'inchiostro risale per capillarità lungo le fibre, con un fronte ramificato, fino a imbevere tutto il pulsante: lì compare Added to bag chiaro sull'inchiostro asciutto. Un secondo clic toglie dal carrello e la carta torna pulita.
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 ink bleed button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the ink bleed button: a pill of cotton paper. Over it a fountain pen follows the pointer and a drop of ink swells
on its nib; a click lets the drop fall, it bursts into a crown and the ink creeps out along the paper's fibres
until the whole button is soaked, with Added to bag pale on the dry ink. A second click bleaches it clean -->
<div class="ink" data-ink data-autoclic>
<button class="ink__btn" type="button" aria-label="Add to bag, €18" data-btn>
<!-- the paper and the printed words; the ink, drawn on a canvas; the stain, the pale words, the grain and the pen -->
<svg class="ink__layer ink__layer--back" aria-hidden="true" data-back></svg>
<canvas class="ink__layer ink__soak" aria-hidden="true" data-soak></canvas>
<svg class="ink__layer ink__layer--front" aria-hidden="true" data-front></svg>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
18 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 «Il pulsante d'inchiostro» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un pulsante a pillola di carta di cotone, con la grana e qualche fibra chiara, che dice Add to bag €18. Col mouse sopra, al posto del puntatore compare una stilografica laccata rossa col pennino d'oro, tenuta un poco sopra la carta con la sua ombra sfumata: segue il puntatore su una molla, si inclina quando la si trascina, e sulla punta del pennino si gonfia una goccia d'inchiostro blu che dondola quando la penna parte e si ferma. Cliccando la goccia si stacca e cade sul punto, la penna alleggerita si solleva un attimo; la goccia scoppia in una corona con punte sottili e goccioline, e da lì l'inchiostro si allarga nella carta per capillarità: il fronte è ramificato e irregolare, corre più in fretta lungo le fibre e di traverso che in su e in giù, rallenta man mano, ha davanti un alone d'acqua chiaro e sul bordo una riga più scura di pigmento; dietro, il blu asciuga in blu nero. Quando la carta è tutta imbevuta, sull'inchiostro asciutto compare chiaro Added to bag con una spunta. Un secondo clic toglie dal carrello: dal punto cliccato un fronte chiaro corre di nuovo lungo le fibre, l'inchiostro schiarisce e svanisce e la carta torna pulita con Add to bag. Al telefono la penna scende dove tocca il dito con la goccia già pronta, la lascia cadere e se ne va.
Come funziona
La penna e la goccia sul pennino
La stilografica è un SVG disegnato a mano (fusto laccato, anello, pennino d'oro con la fessura e il foro) che insegue il puntatore su una molla integrata a mano sul ticker di GSAP; la sua inclinazione segue la velocità orizzontale. La goccia sulla punta cresce in SWELL secondi ed è appesa a una seconda molla, spinta dall'accelerazione della penna: dondola quando la penna parte e si ferma. L'ombra sulla carta si sposta e si allarga con l'altezza della penna.
La carta come una griglia
La pillola è una griglia di celle, una per pixel. Ogni cella ha un costo per l'inchiostro: un rumore allungato in orizzontale come la grana del foglio, elevato a esponente con BRANCH (più alto, più differenza fra celle facili e difficili, quindi più rami), e diviso lungo le fibre, che sono le stesse curve disegnate nella grana. Andare in su e in giù costa di più che di traverso: le fibre stanno di traverso.
Il fronte per capillarità
Dal punto dove cade la goccia, l'algoritmo di Dijkstra trova per ogni cella quanta strada deve fare l'inchiostro lungo il percorso meno costoso: il fronte che ne esce è ramificato, con dita lungo le fibre e golfi dove la carta è dura. Il calcolo si fa un pezzo per fotogramma mentre la goccia cade, così il clic non scatta. Poi il fronte avanza su quella mappa con la legge di Washburn: la distanza cresce con la radice quadrata del tempo, veloce all'inizio e sempre più lenta.
Bagnato, asciutto e alone
A ogni fotogramma la tela si ridipinge dalla mappa: davanti al fronte un alone d'acqua chiaro, sul fronte una riga più scura dove si accumula il pigmento, dietro il blu bagnato che in DRYING secondi diventa blu nero, un po' più scuro dove l'inchiostro si è raccolto in una fibra. La corona sopra è un tracciato ridisegnato a ogni fotogramma (un cerchio che ondeggia, SPIKES punte a campana e goccioline) con un filtro di turbolenza fine.
Togliere dal carrello
Al secondo clic si calcola un'altra mappa dal punto cliccato, sulla stessa carta: un fronte chiaro corre lungo le stesse fibre, e dove passa l'inchiostro schiarisce verso un azzurro pallido e svanisce in UNDO secondi, finché la carta torna pulita. Added to bag sparisce subito, Add to bag è stampato sotto sulla carta e riaffiora con lei.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWELL | script.js | 0.9 | I secondi che la goccia impiega a gonfiarsi sul pennino. |
SOAK | script.js | 1.8 | I secondi che l'inchiostro impiega ad attraversare tutto il pulsante. |
DRYING | script.js | 0.6 | I secondi in cui l'inchiostro resta blu bagnato dopo il passaggio del fronte. |
FIBRES | script.js | 1 | Quanto l'inchiostro corre lungo le fibre: 0 per niente, 2 in dita lunghe. |
BRANCH | script.js | 1 | Quanto è frastagliato e ramificato il fronte: 0 una macchia liscia, 2 molto ramificato. |
SPIKES | script.js | 13 | Quante punte ha la corona della goccia. |
UNDO | script.js | 1.1 | I secondi che la carta impiega a tornare pulita al secondo clic. |
LABEL | script.js | Add to bag | La scritta del pulsante. |
PRICE | script.js | €18 | Il prezzo accanto alla scritta. |
ADDED | script.js | Added to bag | La scritta chiara sull'inchiostro asciutto. |
Quando usarla
Per il pulsante principale di un negozio o di un sito dove la carta e l'inchiostro c'entrano: stilografiche, cartolerie, tipografie, editori, calligrafi, carte da lettera. Va bene per un'azione che dà un esito che resta (metti nel carrello, iscriviti, firma), perché l'inchiostro lo segna e il secondo clic lo cancella.
Sul telefono
La pillola è larga 320 pixel, o lo schermo meno 48, e la carta si ricalcola sulla misura vera. Senza puntatore che passa, al tocco la penna scende dove tocca il dito con la goccia già pronta, la lascia cadere lì e se ne va; il secondo tocco schiarisce l'inchiostro da quel punto.
Con il movimento ridotto
La penna non segue il puntatore: compare in dissolvenza ferma a destra della scritta, con la goccia già pronta. Al clic niente caduta e niente fronte che avanza: l'inchiostro asciutto con la corona e Added to bag compaiono insieme in una dissolvenza, e il secondo clic li fa svanire allo stesso modo.
Trappole
- L'algoritmo di Dijkstra su tutto il pulsante (oltre ventimila celle) costa una ventina di millesimi di secondo: fatto al clic faceva scattare la caduta. Ora si fa a pezzi di settemila passi per fotogramma mentre la goccia cade, e il fronte parte solo a mappa finita.
- Il fronte che avanza a velocità costante sembrava un'onda meccanica: con la legge di Washburn (distanza come radice del tempo) parte di slancio e rallenta come l'inchiostro vero.
- Senza un costo diverso fra orizzontale e verticale il fronte ramificato restava tondo nel complesso: andare in su e in giù costa di più, perché le fibre stanno di traverso, e la macchia si allunga lungo il pulsante.
- Ritagliare la tela con il border-radius del CSS lasciava gli angoli a scalini: il ritaglio della pillola si fa dentro la tela stessa, con un bordo morbido di un pixel.
- Le fibre del costo e quelle della grana devono essere le stesse: con due serie diverse l'inchiostro faceva dita dove sulla carta non c'erano fibre.
- Un clic senza penna sopra (un tocco veloce, un clic da script, la tastiera) deve prima mettere giù la penna con la goccia, o non c'è niente che cada.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
