Il pulsante marmorizzato

Pulsanti, Hover, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Shuffle palette di uno strumento per le palette di colori, rivestito di carta marmorizzata come le guardie di un libro antico, con un'etichetta di carta incollata sopra. Il puntatore passa nel bagno come uno stilo e l'inchiostro lo segue in volute. Al clic la nuova palette cade a pioggia di gocce partendo dal punto cliccato: ogni goccia spinge da parte i colori vecchi in bordi sottili, poi un pettine li fa ondeggiare.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The marbled button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/eb-garamond@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the marbled button: the Shuffle palette button of a colour palette tool, a board covered in marbled paper with
         a paper label pasted on it. The pointer drags through the inks like a stylus; a click lets the new palette fall
         one drop per colour, each drop pushing the old pattern aside, and a comb draws them into feathers -->
    <div class="marble" data-marble>
      <button class="marble__btn" type="button" data-btn data-autoclic>
        <canvas class="marble__sheet" aria-hidden="true" data-sheet></canvas>
        <canvas class="marble__sheet marble__ghost" aria-hidden="true" data-ghost></canvas>
        <span class="marble__sheen" aria-hidden="true" data-sheen></span>
        <span class="marble__label" data-label>
          <span class="marble__icons" aria-hidden="true" data-icons>
            <svg class="marble__icon" viewBox="0 0 24 24" data-shuffle>
              <path d="M3 7h2.6c2.4 0 3.9 1.1 5.1 3.1l1.6 2.8c1.2 2 2.7 3.1 5.1 3.1H21"/>
              <path d="M18.4 13.4 21 16l-2.6 2.6"/>
              <path d="M3 16h2.6c1.5 0 2.6-.4 3.5-1.2"/>
              <path d="M13.9 8.2c1-.8 2.1-1.2 3.5-1.2H21"/>
              <path d="M18.4 4.4 21 7l-2.6 2.6"/>
            </svg>
            <svg class="marble__icon marble__icon--done" viewBox="0 0 24 24" data-check>
              <path d="M5 12.6l4.4 4.3L19.2 7.2" data-tick/>
            </svg>
          </span>
          <span class="marble__words" data-words>Shuffle palette</span>
        </span>
      </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.

50 valori da cambiare

Apri il Playground

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 marmorizzato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una tavoletta rettangolare con gli angoli appena arrotondati, rivestita di carta marmorizzata a pietre come la carta turca: gocce blu, rosso mattone, ocra, verde petrolio e color osso, ognuna con dentro gocce più piccole di un altro colore, stipate fino a diventare pietre, con sottili venature chiare fra l'una e l'altra; sotto la tavoletta lo spessore scuro del cartone. In mezzo è incollata un'etichetta di carta avorio con un doppio filetto, le due frecce incrociate dello shuffle e Shuffle palette in Garamond. Col mouse sopra, la carta prende un lucido morbido che segue il puntatore, e il puntatore stesso passa nel bagno come uno stilo: l'inchiostro intorno lo segue e si arriccia in volute che restano. Cliccando, la scritta diventa Mixing inks e la nuova palette cade a pioggia, una goccia dopo l'altra a partire dal punto cliccato: ogni goccia si allarga e spinge da parte i colori vecchi, che si stringono in bordi sottili intorno alle pietre nuove; in metà delle pietre cade una seconda goccia più piccola di un altro colore. Poi un pettine passa di traverso e fa ondeggiare appena le pietre. La scritta diventa New palette con una spunta che si disegna, e dopo un attimo torna Shuffle palette. Ogni clic passa alla palette dopo. Al telefono il dito trascinato di traverso pettina l'inchiostro, il tocco mescola.

Come funziona

Ogni inchiostro è un poligono

Ogni goccia è un poligono di punti che galleggia sul bagno, disegnato sulla tela dal più vecchio al più nuovo. Ogni gesto (una goccia, il pettine, lo stilo) sposta tutti i punti di tutti gli inchiostri come li sposterebbe il liquido. La matematica è quella della marmorizzazione di Aubrey Jaffer: le trasformazioni sono continue e non si piegano mai su sé stesse, quindi i poligoni non si incrociano e le forme restano carta marmorizzata vera.

La goccia che spinge

Una goccia di raggio r che cade in C sposta ogni punto P lontano da C, in modo che il quadrato della sua distanza cresca di r²: P' = C + (P − C) · √(1 + r² / |P − C|²). Così l'area di ogni inchiostro resta la stessa e i colori vecchi si stringono in bordi sottili intorno a quello nuovo. Mentre la goccia si allarga, a ogni fotogramma si applica solo la crescita di r² rispetto al fotogramma prima: gocce applicate una dopo l'altra nello stesso punto si sommano.

Il pettine e lo stilo

Il pettine ha TINES denti lungo la tavoletta: ogni punto scorre di traverso di tanto quanto vale una campana (larga SHARPNESS) della sua distanza dal dente più vicino, quindi le onde vengono tonde. Lo stilo è il puntatore: il suo percorso, preso con getCoalescedEvents, si percorre a passi corti, e a ogni passo i punti vicini si spostano con lui secondo una gaussiana larga TRAIL. A passi corti lo spostamento non supera mai la pendenza che piegherebbe il liquido su sé stesso.

Punti nuovi, punti vecchi

Dopo ogni mossa, un lato che si è allungato oltre 3,4 pixel prende punti nuovi nel mezzo, e due punti troppo vicini diventano uno. Solo vicino alla tavoletta, però: fuori, dove nessuno guarda e né il pettine né lo stilo possono riportare niente dentro, i lati restano lunghi. A fine mescolata ogni inchiostro si dipinge su una tela nascosta in un colore suo, a metà misura: quelli che non si vedono da nessuna parte (sepolti sotto i nuovi) se ne vanno, e gli altri si tagliano a un margine intorno alla tavoletta.

La pioggia della palette nuova

Le gocce sono tante quante servono a coprire COVER volte la tavoletta, su un nido d'ape scosso un poco, e cadono a partire dal punto cliccato, STAGGER secondi l'una dall'altra, ognuna allargandosi in SPREAD secondi con expo.out. In metà delle pietre ne cade una seconda più piccola di un altro colore. Il pettine va una volta di qua e una di là, a mescolate alterne, così l'inchiostro non scivola tutto da una parte.

Carta, venature, etichetta

Le venature chiare intorno a ogni inchiostro sono la stessa forma riempita tre volte nel colore del bagno, spostata di un pelo in tre direzioni, sotto l'inchiostro: costa un terzo di un contorno. Sopra tutto c'è una grana di carta con qualche fibra, fusa in overlay. L'etichetta è HTML: tiene la misura delle sue parole più lunghe, e quando la scritta cambia l'icona scivola al suo posto nuovo mentre le parole cambiano con una sfocatura.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COVER`	script.js	`1.1`	Quanta tavoletta copre la palette nuova: 1 quasi tutta, meno lascia più colori vecchi.
`SIZE`	script.js	`11`	Quanto si allarga una goccia, in pixel: la misura delle pietre.
`STAGGER`	script.js	`0.015`	I secondi fra una goccia e la successiva.
`SPREAD`	script.js	`0.55`	I secondi che una goccia impiega ad allargarsi.
`COMB`	script.js	`8`	Di quanto il pettine trascina l'inchiostro dopo le gocce, in pixel (0, niente pettine).
`TINES`	script.js	`3`	I denti del pettine, lungo l'altezza della tavoletta.
`SHARPNESS`	script.js	`5`	Fino a che distanza da un dente l'inchiostro lo segue ancora, in pixel.
`TRAIL`	script.js	`13`	Quanto è larga la scia del puntatore nell'inchiostro, in pixel.
`DRAG`	script.js	`0.8`	Quanto del movimento del puntatore segue l'inchiostro: 0 niente, 1 tutto.
`VEINS`	script.js	`0.55`	Le venature chiare intorno a ogni inchiostro: 0 niente, 1 forti.
`BUSY`	script.js	`Mixing inks`	La scritta mentre le gocce si allargano.
`DONE`	script.js	`New palette`	La scritta quando la palette nuova è pronta.
`SEED`	script.js	`11`	Il primo foglio: un altro numero, un altro disegno.
`PALETTES`	script.js	`[['#1d3557', '#a63d40', '#e9b44c', '#2f6f68', '#f3e6c8'], …]`	Le palette che il pulsante passa a turno, un inchiostro per colore (la prima è quella del primo foglio).

Provali nel Playground

Quando usarla

Per il pulsante che rimescola o genera qualcosa a caso in uno strumento creativo: palette di colori, copertine, motivi, temi, nomi. Sta bene dove la carta, la legatoria e il fatto a mano c'entrano: editori, cartolerie, rilegatori, siti di libri e di design. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.

Sul telefono

La tavoletta è alta 60 pixel come gli altri pulsanti e larga 320, o lo schermo meno 48; il foglio si ridisegna alla misura vera. Il dito trascinato di traverso pettina l'inchiostro come il puntatore (touch-action: pan-y, così in su e in giù la pagina scorre ancora); il tocco mescola, e la pioggia parte da dove ha toccato il dito.

Con il movimento ridotto

Niente stilo e niente lucido che segue il puntatore. Al clic il foglio nuovo si calcola tutto in una volta e quello vecchio svanisce sopra di lui in una dissolvenza; le scritte cambiano in dissolvenza, senza scivolare e senza sfocatura, e la tavoletta premuta si scurisce appena invece di rimpicciolire.

Trappole

Il pettine col calo esponenziale della distanza dal dente (quello del testo di Jaffer) faceva punte aguzze, più tessuto fiammato che carta marmorizzata: con una campana gaussiana le onde vengono tonde.
Dopo venti mescolate i punti erano diventati più di centoquarantamila, quasi tutti fuori dalla tavoletta: i bordi degli inchiostri vecchi, spinti lontano da ogni goccia. Ora fuori dalla tavoletta i lati non prendono punti nuovi, gli inchiostri sepolti si trovano con una tela di colori-codice e se ne vanno, e gli altri si tagliano a un margine (Sutherland e Hodgman): restano sotto i sessantamila.
Le venature come contorno (stroke) di ogni inchiostro costavano tre volte il riempimento, con tante migliaia di punti: tre riempimenti spostati di un pelo sotto l'inchiostro fanno la stessa venatura per un terzo.
Il pettine sempre nello stesso verso faceva scivolare l'inchiostro da una parte, e dal bordo opposto entrava il bagno vuoto: va di qua e di là a mescolate alterne, e il primo foglio è disegnato anche oltre i bordi.
Le gocce della pioggia in un ordine a caso sembravano rumore: dal punto cliccato verso fuori la pioggia si legge come una risposta al clic.
La scritta che cambia lunghezza faceva saltare l'etichetta: l'etichetta tiene la misura delle parole più lunghe, e l'icona scivola al suo posto nuovo invece di saltare.

Librerie

GSAP 3.15.0, EB Garamond (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 12 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.