Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La nav ad acquerello
La barra in alto di uno studio di illustrazione, su una striscia di carta da acquerello a grana fine. Il link corrente sta su una pennellata bagnata di oltremare: scegliendone un altro, una scia d'acqua corre dalla vecchia pennellata alla nuova voce, il pigmento la segue fluendo, e la pennellata nuova fiorisce sul bordo nei cavolfiori dell'acquerello, mentre la vecchia si asciuga in un alone pallido dal bordo più scuro e sbiadisce. Una simulazione vera di acqua e pigmento su una griglia.
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 watercolour nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of an illustrator's studio, on a strip of fine-grained watercolour paper. The current link sits on
a wet stroke of ultramarine; choosing another link a stream of water runs over to it, the pigment flows after
it and the new stroke flowers at its edge, while the old one dries to a pale stain and fades. The paint is a
real simulation of water and pigment on a grid, drawn on a canvas under the words -->
<header class="bar" data-bar>
<canvas class="bar__paper" aria-hidden="true" data-paper></canvas>
<canvas class="bar__paint" aria-hidden="true" data-paint></canvas>
<canvas class="bar__paint bar__paint--old" aria-hidden="true" data-old></canvas>
<canvas class="bar__sheen" aria-hidden="true" data-sheen></canvas>
<a class="brand" href="#" aria-label="Deckle, home">
<!-- a round watercolour brush, its tip loaded with ultramarine -->
<svg class="brand__mark" viewBox="0 0 24 24" aria-hidden="true">
<path class="brand__handle" d="M11.97 12.03 L19.82 4.18"/>
<path class="brand__ferrule" d="M10.7 16.13 L13.21 13.27 L10.73 10.79 L7.87 13.3Z"/>
<path class="brand__tip" d="M3.2 20.8 C5.18 20.52 7.65 19.6 9.14 17.97 L10.59 16.03 L7.97 13.41 L6.03 14.86 C4.4 16.35 3.48 18.82 3.2 20.8Z"/>
</svg>
<span class="brand__name">Deckle</span>
</a>
<nav class="bar__nav" aria-label="Main">
<ul class="bar__list" data-list>
<li><a class="bar__link" href="#" aria-current="page" data-link><span class="bar__word" data-word>Work</span></a></li>
<li><a class="bar__link" href="#" data-link><span class="bar__word" data-word>Prints</span></a></li>
<li><a class="bar__link" href="#" data-link data-autoclic><span class="bar__word" data-word>Workshops</span></a></li>
<li><a class="bar__link" href="#" data-link><span class="bar__word" data-word>Journal</span></a></li>
<li><a class="bar__link" href="#" data-link data-autoclic><span class="bar__word" data-word>Contact</span></a></li>
</ul>
</nav>
<a class="bar__cta" href="#"><span>Commissions</span></a>
</header>
</main>
<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.
22 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 nav ad acquerello» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una striscia di carta da acquerello color crema, con la grana fine della carta pressata a freddo, qualche fibra, il bordo appena sfrangiato e un'ombra leggera. A sinistra il marchio, un pennello tondo con la punta carica di blu e il nome Deckle in corsivo; al centro cinque link con le grazie, Work, Prints, Workshops, Journal e Contact, grigi tranne quello corrente, scuro; a destra il pulsante Commissions. All'arrivo un pennello invisibile stende sotto Work una pennellata di oltremare: l'acqua bagna la carta da sinistra a destra, il pigmento la segue un istante dopo, all'inizio della pennellata si apre un fiore più chiaro dal bordo crespo, la fine si sfilaccia nelle righe del pennello asciutto, e il bordo si fa più scuro mentre l'acqua cala. La pennellata resta bagnata: lucida, con una linea di luce spezzata sul bordo alto e un filo d'ombra su quello basso. Puntando un altro link la carta sotto la parola si bagna appena, un velo d'acqua chiara e lucida che si allarga dal centro, e asciuga quando il puntatore se ne va. Cliccandolo, la vecchia pennellata si bagna di nuovo e luccica, e una scia d'acqua sottile scende dalla sua estremità, dopo la fine della parola, corre serpeggiando nella fascia bassa della barra, sotto le parole in mezzo senza mai toccarne le lettere, e risale dentro la nuova pennellata, prima dell'inizio della sua parola; un attimo dopo il pigmento sollevato dalla vecchia pennellata la segue, colorando la scia. Arrivata, l'acqua allaga la forma della nuova pennellata dalla parte da cui viene, il colore la riempie e il bordo fiorisce nei cavolfiori dell'acquerello: una macchia più chiara chiusa da una linea scura a lobi, che sborda un poco oltre la pennellata. La vecchia pennellata, svuotata, si asciuga in un alone pallido dal bordo più scuro, e in circa tre secondi sbiadisce del tutto insieme alla scia: resta solo la pennellata della voce corrente. Ogni pennellata è diversa: inclinazione, bordo, fiori e righe cambiano ogni volta. Quando la carta è ferma il disegno si ferma.
Come funziona
La carta
Una tela a piena risoluzione, disegnata una volta sola: il rilievo della carta è una somma di tre rumori a valori a 1,7, 3,6 e 9 pixel; la luce viene da sinistra in alto, quindi ogni pixel è un poco più chiaro o più scuro secondo la pendenza del rilievo verso di lei, più qualche nuvola larga e un centinaio di fibre corte. Il bordo sfrangiato è la distanza da un rettangolo con gli angoli tondi, mossa da altro rumore, che dà la trasparenza. La tela ha un'ombra CSS ferma.
La griglia dell'acqua e del pigmento
Una griglia di celle ogni 2 pixel, con l'acqua sulla carta, il pigmento sospeso nell'acqua e quello già posato nella carta (questi due in due strati: della pennellata corrente e delle vecchie). Fa 120 passi al secondo, con il passo del fotogramma limitato a 1/30 di secondo. A ogni passo l'acqua passa da una cella bagnata alla vicina più bassa, contando i rilievi della carta, e porta con sé la sua parte di pigmento; bagna una cella asciutta solo se è più profonda della soglia di quel punto di carta, presa da un rumore a lobi, così i bordi avanzano irregolari. Il pigmento si diffonde anche da solo nell'acqua ferma.
Il bordo scuro e la granulazione
L'acqua evapora, cinque volte più in fretta sulle celle che hanno vicini asciutti; mentre cala, l'acqua scorre verso il bordo a sostituire quella che se ne va e ci porta il pigmento (un passaggio di pigmento verso le celle più vicine al bordo, regolato da EDGES): asciugando, il bordo resta più scuro. Il pigmento si posa in fretta dove l'acqua è bassa e di più negli avvallamenti della carta; quando una cella si asciuga, tutto quello che resta si posa lì.
La scia e il pigmento che la segue
Scegliendo un link, tutto quello che c'è diventa strato vecchio. La vecchia pennellata si bagna di nuovo e una parte del suo pigmento torna in sospensione; la testa d'acqua corre in RUN secondi, con un'accelerazione e una frenata, lungo una linea che scende dalla vecchia pennellata dopo la fine della sua parola, serpeggia nella fascia bassa della barra, fra il fondo delle parole e il bordo della carta, e risale dentro la nuova pennellata prima della sua parola, e la bagna. Il pigmento parte 0,12 secondi dopo: ogni cella dietro il suo fronte lo sposta lungo la linea, anche nelle curve, alla velocità del fronte, distribuendolo sulle quattro celle d'arrivo, così non se ne perde; la vecchia pennellata ci si svuota dentro più piano. All'arrivo la nuova pennellata si allaga dalla parte da cui viene l'acqua e il pigmento nuovo la riempie.
I cavolfiori
Vicino all'estremità d'arrivo si apre un fiore: un fronte che cresce come la radice del tempo fino a un raggio diverso per ogni direzione, preso da un rumore letto su un cerchio (lobi grandi, smerli e frange). Solo la fascia appena dietro il fronte spinge il suo pigmento sospeso una cella più in fuori: il fronte se lo porta dietro e lo ammucchia dove si ferma, una linea scura e crespa intorno a una macchia più chiara; dove supera il bordo della pennellata bagna la carta e fiorisce oltre.
Il colore, il lucido e lo sbiadire
Ogni pixel legge le celle vicine dopo una leggera sfocatura: la densità del pigmento diventa colore con la legge di Beer e Lambert, canale per canale da --pigment, sopra la carta con mix-blend-mode multiply; più scura negli avvallamenti, con il bordo netto preso dalla maschera delle celle dipinte. L'acqua scurisce appena la carta e sul suo bordo alto disegna una linea di luce spezzata, su un'altra tela. Lo strato vecchio aspetta tre quarti di DRYING, mentre si asciuga, e poi sbiadisce tutto insieme in FADE secondi; la pennellata corrente tiene un velo d'acqua (WET). Quando niente cambia più il ciclo si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RUN | script.js | 0.55 | Quanti secondi impiega la scia d'acqua a correre fino al link scelto (un poco di più per quelli lontani). |
WATER | script.js | 1 | Quanta acqua stende il pennello: di più, e la pennellata nuova si allarga e fiorisce di più. |
BLOOM | script.js | 1 | Quanto fiorisce in cavolfiori il bordo della pennellata nuova: 0 un bordo liscio, 2 molto. |
EDGES | script.js | 1 | Quanto pigmento porta verso i bordi l'acqua che asciuga: 0 niente, 2 un bordo scuro. |
GRANULATION | script.js | 1 | Quanto il pigmento si posa negli avvallamenti della carta: 0 niente, 2 molto. |
DRYING | script.js | 1.3 | Quanti secondi impiega ad asciugarsi una pennellata vecchia. |
FADE | script.js | 2.4 | Quanti secondi impiega a sbiadire l'alone pallido, una volta asciutto. |
VEIL | script.js | 1 | Quanto si bagna la carta sotto un link puntato: 0 per niente. |
WET | script.js | true | La pennellata corrente resta bagnata e lucida; spento, si asciuga come le vecchie. |
Quando usarla
Per la testata di chi lavora col colore e con la carta: un'illustratrice o un illustratore, uno studio di acquerello, un negozio di colori e pennelli, una cartiera, una scuola d'arte, una rivista di disegno, un libro illustrato. Sta bene con poche voci corte, su una pagina chiara; è una barra da sito, sempre in cima.
Sul telefono
Sotto i 900 pixel il pulsante sparisce; al telefono la barra è alta 60 pixel e larga quanto lo schermo meno 32 (358 a 390), del marchio resta il pennello e i link si stringono fino a 12,5 pixel, così ci stanno tutti e cinque senza scorrere. Le pennellate e i veli si accorciano in proporzione, la griglia è la stessa: scia, pigmento, fiori e alone sono quelli del computer. Il dito su un link bagna subito la carta sotto la parola, e alzandolo il link è scelto, senza aspettare il doppio tocco.
Con il movimento ridotto
Niente scia, niente flusso e niente fiori che si aprono: la pennellata corrente è già asciutta, calcolata in un colpo, e compare con una dissolvenza; scegliendo un altro link la nuova, anch'essa già asciutta, compare in dissolvenza mentre la vecchia sparisce allo stesso modo. Il velo d'acqua sotto il link puntato c'è subito, senza allargarsi.
Trappole
- Il pigmento spinto lungo la scia si ammucchiava tutto alla testa e, fermo dietro la parola in mezzo, la cancellava con una barra blu scura. Ora nella scia corre alla velocità del fronte mentre la vecchia pennellata ci si svuota più piano: la scia porta una tinta chiara e uniforme, e la densità mostrata è compressa verso l'alto, così non diventa mai nera.
- La scia correva a metà altezza dietro le parole in mezzo: anche chiara, per un attimo sembrava un barrato. Ora scende dalla vecchia pennellata dopo la fine della sua parola, corre nella fascia bassa della barra, fra il fondo delle parole e il bordo della carta, e risale solo dentro la nuova pennellata: non tocca mai le lettere. Il pigmento la segue lungo la tangente della linea, se no nella discesa restava indietro contro la parete e faceva una colatura scura.
- Scegliendo un link mentre la prima pennellata si stava ancora stendendo, quella continuava a versare pigmento della pennellata corrente, che non sbiadisce mai: restavano un grumo e un pezzo di scia per sempre. Una pennellata interrotta ora versa pigmento vecchio, e il pigmento corrente che finisce lontano dalla sua pennellata, o nella scia fuori dalla sua forma, torna vecchio e sbiadisce.
- All'uscita della vecchia pennellata il pigmento spinto verso la scia si ammucchiava contro il bordo asciutto in un grumo scuro. Ora contro un bordo asciutto scivola lungo di lui verso l'uscita, la vecchia pennellata si svuota più piano e la scia nasce già larga, così all'uscita resta solo un piccolo accento, che sbiadisce col resto.
- Una scia sottile è fatta tutta di bordo, e il bordo evapora più in fretta: si asciugava prima che il pigmento arrivasse e il colore si fermava a metà strada. Le sue celle restano bagnate finché il pigmento non l'ha percorsa tutta, poi si asciugano.
- Dipinta cella per cella, la griglia si vedeva: quadretti nel colore e bordi a scalini. Prima di dipingere le celle passano per una sfocatura leggera, la densità vicino al bordo è la media delle sole celle dipinte (così il bordo scuro arriva fino al limite) e il limite stesso è una soglia netta, come il bordo secco di un acquerello.
- Facendo sbiadire ogni cella per conto suo, i mucchi di pigmento più densi restavano per ultimi come puntini blu sparsi. Lo strato vecchio sbiadisce tutto insieme con un solo fattore, e sparisce intero in FADE secondi qualunque sia la sua densità.
- La pennellata corrente tiene un velo d'acqua: ai bordi però l'acqua continuava a scorrere nei lobi che si asciugavano, e il ciclo non si fermava mai. Dalle celle che tengono l'acqua non esce niente verso quelle che non la tengono, così la carta arriva a un equilibrio e il disegno si ferma.
- Una velatura bianca sopra il colore lo faceva solo più pallido e il bagnato non si leggeva; scurire la carta bagnata la faceva grigia e sporca sul crema. Il bagnato si legge dal volume: una linea di luce spezzata sul bordo alto dell'acqua e un filo d'ombra su quello basso, con la carta appena più calda.
Librerie
Literata (font variabile, con l'asse della grandezza ottica) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 KB, e non servono librerie.
Collaudo
Provata il 7 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.
