Progetti in fila con l'anello
Scroll, Immagini, Testo
NuovaGratis
Torna alla libreria
Il logo d’inchiostro nell’acqua
L’intro di un logo in una vasca di vetro piena d’acqua: cadono gocce d’inchiostro che fanno il cratere e gli anelli, scendono in volute e filamenti e poi si avvolgono fino a disegnare il logo, nitido al centro e ancora fluido ai bordi; un’ultima goccia di un altro colore lo tinge in parte. Nel Playground ci metti il tuo nome o carichi il tuo logo.
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-in-water logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script paints the glass tank, the water, the drops and the ink on this canvas -->
<canvas class="palco" data-stage role="img" aria-label="Nerida"></canvas>
<p class="nota">Click or tap to see it again</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.
23 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 logo d’inchiostro nell’acqua» da Animorio e adattala al mio sitoCosa fa
Una vasca di vetro piena d’acqua chiara, vista di lato e appena dall’alto, sale al suo posto sul tavolo, si posa con un piccolo schiacciamento elastico e l’acqua dondola da una parte all’altra prima di fermarsi. Dall’alto cadono una dopo l’altra tre gocce d’inchiostro blu, allungate dalla velocità: ognuna scava un piccolo cratere nella superficie, fa saltare una corona di goccioline e uno zampillo da cui si stacca una gocciolina che ricade, e manda anelli che si allargano sull’acqua. Sotto, l’inchiostro scende come un anello che si arrotola su sé stesso, con una scia sottile che resta attaccata alla superficie; poi l’anello si rompe in lobi e ne pendono filamenti morbidi che affondano e si allargano, portati da una corrente lenta. A un certo punto le nuvole di ogni goccia cominciano a girare come un vortice intorno al loro centro e intanto si stringono, finché l’inchiostro disegna il logo di un marchio inventato, Nerida: il logo si stringe un attimo e si allarga con un rimbalzo elastico, nitido al centro, mentre ai bordi resta una sfumatura d’inchiostro che continua a muoversi piano. Poi cade un’ultima goccia arancione: scende sul logo, che si gonfia appena al tocco, e il colore si spande dentro le lettere con una molla, lasciando le prime tinte d’arancione che sfumano nel blu. Il logo resta in mostra; dopo qualche secondo l’inchiostro si scioglie, ogni pezzo va per la sua strada, l’acqua torna chiara e cadono gocce nuove, ogni volta in un ordine un po’ diverso. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: le sue parti scure e colorate diventano inchiostro.
Come funziona
Un orologio solo
Tutto è dipinto su una canvas, a ogni fotogramma, da un solo numero: il tempo dell’acqua. Una timeline GSAP lo porta avanti con ease none, insieme a pochi tween con le molle (l’arrivo della vasca, l’onda dell’acqua, il rimbalzo del logo, la macchia di colore). Ogni goccia d’inchiostro è una funzione del tempo, non una simulazione passo per passo: così la timeline si può fermare, riavvolgere e saltare a un’etichetta (start, drop, ink, gather, logo, accent, rest, leave) e il fotogramma è sempre lo stesso.
L’anello che si arrotola
Ogni particella ha un posto su un anello a ciambella: un angolo intorno all’asse della goccia e un punto sulla sezione, messo lungo una spirale. Il centro dell’anello scende e rallenta con un esponenziale, il raggio cresce, e la sezione gira all’indietro (fuori sale, dentro scende) come un vero anello di fumo. Dopo mezzo secondo il raggio si deforma con un seno, l’anello si rompe in lobi e una parte delle particelle scivola lungo dei filamenti che pendono, affondano e si allargano; un’altra fa la scia fino alla superficie.
La corrente
Sopra la forma c’è una corrente lenta: il rotore di una somma di onde (sin e cos di posizione e tempo), calcolato con le derivate esatte. Essendo un campo senza divergenza, le particelle vicine si muovono insieme e l’inchiostro sembra un fluido e non un pulviscolo. Le particelle sono macchie morbide disegnate una volta su una piccola canvas con un gradiente radiale e stampate con drawImage e una trasparenza bassa: dove si accumulano l’inchiostro è scuro, dove si diradano è velato.
Il logo che si condensa
Le lettere si misurano su una canvas col carattere della pagina e si dipingono nitide su una canvas a parte; dai suoi pixel si scelgono i punti d’arrivo, segnando quelli sul bordo. Ogni nuvola gira intorno al suo centro mentre si stringe sui punti (una rotazione che cresce e un raggio che cala insieme), poi il logo nitido esce da un leggero sfocato fatto di copie spostate in cerchio. Le particelle interne spariscono, quelle di bordo restano e ondeggiano: è la sfumatura fluida intorno alle lettere.
L’ultima goccia e il tuo logo
La goccia arancione ha le sue particelle, che finiscono sulle lettere vicine al punto in cui tocca. Il colore si spande con una seconda canvas: il logo, poi il colore con source-in, poi un gradiente radiale con destination-in, il cui raggio cresce con elastic.out. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: la trasparenza di ogni pixel si moltiplica per quanto è scuro o colorato, così uno sfondo bianco resta acqua. Nel Playground accanto al campo c’è il tasto per caricare un file.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Nerida' | Il logo scritto: l’inchiostro si raccoglie per disegnarlo. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
DROPS | script.js | 3 | Quante gocce d’inchiostro cadono nell’acqua prima che il logo si formi (da 1 a 5). |
SWIRL | script.js | 1 | Quanto l’inchiostro si arriccia e gira nella corrente prima di arrivare (0 = va quasi dritto al logo). |
INK | script.js | 1 | Quanto inchiostro: più particelle e nuvole più fitte. |
ACCENT | script.js | true | L’ultima goccia di un secondo colore, che cade sul logo e ne tinge una parte. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima che l’inchiostro si sciolga. |
LOOP | script.js | true | Se l’inchiostro si scioglie e il logo si disegna di nuovo. Con false il logo resta, coi bordi che si muovono piano. |
Quando usarla
Per presentare un logo con un gesto lento e liquido: l’apertura del sito di un marchio di cosmetici, di una cartiera, di uno studio di design, di una galleria, di un’acqua o di un tè, l’anteprima per un cliente, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: su uno schermo alto la vasca è verticale, il logo è largo quasi quanto la vasca e le particelle sono di meno perché il logo è più piccolo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la vasca compare in dissolvenza, poi il logo già formato, con la sua tinta e la sfumatura ferma ai bordi. Se l’animazione ricomincia, il logo se ne va in dissolvenza e torna.
Trappole
- Con un rotolamento attorno al punto d’arrivo di ogni particella l’inchiostro diventava un pulviscolo senza forma, perché ognuna girava intorno a un centro diverso: ora tutta la nuvola di una goccia gira intorno allo stesso centro mentre si stringe, e resta un vortice solo.
- Sciogliendo il logo con la corrente, le particelle vicine si spostavano insieme e ridisegnavano le lettere una seconda volta, più in basso: nell’uscita ognuna ha anche una sua direzione a caso, e il logo nitido sparisce nella prima metà.
- Lo sfocato del logo fatto con copie spostate, se troppo largo, si legge come una scritta doppia: lo spostamento resta sotto un ventesimo dell’altezza delle lettere.
- Con un logo corto o un’immagine quasi quadrata la macchia di colore copriva tutto il logo e la seconda tinta non si vedeva più: il centro e il raggio dipendono dalle proporzioni del logo.
- Le particelle piccole e opache sembravano puntini: le macchie sono grandi, con una sfumatura lunga e una trasparenza bassa, e diventano piccole solo alla fine del viaggio (la misura segue il quadrato dell’avanzamento).
- Con l’ease back della vasca, che sale un po’ oltre il suo posto, l’ombra restava piena sotto una vasca in aria: si accorcia con la distanza dal tavolo in tutte e due le direzioni.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
