Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante che si sgretola
Delete project si disfa in migliaia di granelli: da sinistra a destra il pulsante si sbriciola e un vento pieno di mulinelli porta via la polvere rossa, mentre al suo posto si ricompone dal vento la nota scura Project deleted con Undo. Undo fa girare tutto all'indietro, e i granelli tornano a casa nel pulsante.
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 crumbling button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the crumbling button: pressed, the button is painted on a canvas, its pixels become grains and a wind full of
eddies carries them off from left to right; in its place "Project deleted" gathers out of the same wind, and
Undo plays the whole film backwards until the button is whole again -->
<!-- the button and the note that takes its place share one cell; their shadows stand apart, so that they can fade
while the grains fly -->
<div class="action" tabindex="-1" data-action data-autoclic>
<div class="action__item" data-del-wrap>
<span class="action__shadow action__shadow--del" aria-hidden="true" data-del-shadow></span>
<button class="del" type="button" data-del>
<svg class="del__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6.5h16M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5" data-lid/>
<path d="M6 6.5l.9 12.6A2 2 0 0 0 8.9 21h6.2a2 2 0 0 0 2-1.9L18 6.5M10 10.5v6.5M14 10.5v6.5"/>
</svg>
<span class="del__label">Delete project</span>
</button>
</div>
<div class="action__item" data-toast-wrap>
<span class="action__shadow action__shadow--toast" aria-hidden="true" data-toast-shadow></span>
<div class="toast is-gone" role="group" aria-label="Project deleted" data-toast>
<svg class="toast__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5a8.5 8.5 0 1 0 0-17a8.5 8.5 0 0 0 0 17z"/><path d="M8.6 12.2l2.3 2.3 4.6-4.7"/></svg>
<span class="toast__text">Project deleted</span>
<span class="toast__rule" aria-hidden="true"></span>
<button class="undo" type="button" data-undo>
<svg class="undo__icon" viewBox="0 0 24 24" aria-hidden="true"><g data-undo-turn><path d="M8.5 14.5L4 10l4.5-4.5"/><path d="M4 10h10.5a5 5 0 0 1 0 10H11"/></g></svg>
<span class="undo__label">Undo</span>
</button>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</main>
<!-- the grains in the wind, over the whole page -->
<canvas class="dust" aria-hidden="true" data-dust></canvas>
<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.
20 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 che si sgretola» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un pulsante rosso Delete project con il disegno di un cestino; col mouse sopra il coperchio del cestino si alza e il pulsante si schiarisce appena. Premendolo, il pulsante si sgretola da sinistra a destra lungo un fronte frastagliato: i suoi pixel diventano granelli, prima fermi, poi presi da un vento che soffia verso destra e un po' in alto e li fa girare in mulinelli, e si assottigliano fino a sparire. Mentre il pulsante se ne va, nel suo posto arrivano da sinistra altri granelli, scuri, che rallentano e si posano: si ricompone una nota nera con la spunta verde, Project deleted e un pulsante Undo. Premendo Undo il film gira all'indietro: la nota si sfa nel vento da destra a sinistra, i granelli rossi tornano dal vento e si posano al loro posto, e il pulsante è di nuovo intero.
Come funziona
Il pulsante dipinto
Al clic il pulsante (e la nota che prenderà il suo posto) viene ridipinto su un canvas alla risoluzione dello schermo, leggendo gli stili calcolati: il gradiente, le due righe di luce interne, l'icona SVG tracciata con Path2D e la scritta sulla stessa linea di base della pagina (un elemento vuoto messo per un attimo nella riga dice dov'è). La pittura parte dallo stesso pixel intero della pagina, così scambiare il pulsante vero con il suo dipinto non si vede.
I granelli
I pixel del dipinto si leggono con getImageData in celle quadrate di GRAIN pixel (circa 1.700 granelli per il pulsante, 3.000 per la nota). Ogni granello ha la sua casa, il colore medio della sua cella, un momento di partenza (la sua x lungo il pulsante per SWEEP, più un rumore che fa il fronte frastagliato) e una durata di volo. Si disegnano raggruppati per colore, un fillRect ciascuno, su un canvas fisso sopra la pagina.
Il vento coi mulinelli
Il vento è WIND verso destra, sollevato di LIFT, più i mulinelli: il rotore (curl) di un campo di rumore a due scale, calcolato una volta su una griglia ogni 8 pixel. La velocità è la pendenza del rumore girata di un quarto, così l'aria gira senza mai ammucchiare o sfilacciare i granelli; i mulinelli vengono trascinati dal vento a poco più di metà della sua velocità, e CURL ne regola la forza.
Il film calcolato una volta
Il percorso di ogni granello si integra in anticipo col metodo del punto medio, 32 passi, e si tiene in un Float32Array; si calcola appena la pagina è ferma, e di nuovo dopo un ridimensionamento, così al clic resta solo da dipingere. Tutto il film è funzione di un solo tempo che GSAP fa scorrere. La nota si ricompone integrando all'indietro dal suo posto contro la stessa brezza: giocata in avanti, ogni granello arriva col vento e rallenta posandosi.
Undo all'indietro
Undo riporta il tempo a zero in REWIND secondi con power2.inOut: la nota si disfa nel vento e i granelli del pulsante tornano a casa per la stessa strada. Un'immagine di quello che è intero si aggiorna cella per cella, svuotata quando un granello parte e ridipinta quando torna; le ombre sotto il pulsante e la nota seguono lo stesso tempo, con una maschera sfumata che si sposta col fronte.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIND | script.js | 300 | La velocità del vento, in pixel al secondo. |
CURL | script.js | 130 | Quanto i mulinelli del vento fanno girare i granelli, in pixel al secondo. |
LIFT | script.js | 0.16 | Quanto il vento solleva i granelli, come parte della sua velocità. |
SWEEP | script.js | 0.75 | I secondi che lo sgretolarsi impiega ad attraversare il pulsante da sinistra a destra. |
FLIGHT | script.js | 1.3 | I secondi di volo di un granello prima di sparire. |
GRAIN | script.js | 1.5 | La misura di un granello, in pixel. |
REWIND | script.js | 1.15 | I secondi che Undo impiega a rimettere insieme il pulsante. |
Quando usarla
Per l'azione che cancella qualcosa e si può annullare: un progetto, un file, una conversazione, un elemento di una lista. Il pulsante che si disfa dice che la cosa se n'è andata, e il film all'indietro dice che Undo la riporta davvero. Meglio su un'azione rara: è uno spettacolo, non un gesto da ripetere cento volte al giorno.
Sul telefono
Il pulsante e la nota stanno al centro della pagina, nello stesso posto; i granelli si dipingono alla densità dello schermo (fino a 2) e le celle si allargano da sole se sarebbero troppe. Il vento porta i granelli oltre il bordo dello schermo senza farlo scorrere di lato. Il tocco fa come il clic, e l'hover del cestino non c'è.
Con il movimento ridotto
Niente granelli e niente vento: il pulsante si dissolve e al suo posto compare la nota in dissolvenza, e Undo fa lo stesso al contrario. Il cestino non apre il coperchio, la pressione si vede solo nella luce e all'arrivo il pulsante non sale.
Trappole
- Il dipinto deve coincidere col pulsante vero al pixel: getBoundingClientRect dà posizioni con decimali, mentre il browser disegna il riquadro su pixel interi. Il dipinto parte dall'angolo arrotondato allo stesso modo, e la scritta va sulla linea di base vera, letta da un elemento vuoto nella riga: calcolata dalle misure del carattere stava un pixel più su.
- Calcolare al clic il percorso di 5.000 granelli costava fino a un terzo di secondo prima che si vedesse qualcosa. Il percorso dipende solo da dove stanno i pezzi, non da come appaiono: si calcola prima, a pagina ferma, e al clic si ridipinge soltanto (con l'hover di quel momento).
- Un rumore qualsiasi usato come vento ammucchia i granelli in grumi e lascia buchi. Il rotore di un campo di rumore è un flusso senza sorgenti: i granelli girano in mulinelli restando sparsi come la polvere.
- La nota che si ricompone, coi granelli tutti presi dal vento pieno, arrivava come una macchia nera che attraversava la pagina. Viene da una brezza più debole (un terzo del vento, gli stessi mulinelli) e i granelli si fanno opachi solo vicino al loro posto.
- L'ombra del pulsante è fuori dal canvas: senza fare niente restava un rettangolo rosa dove il pulsante non c'era più. Segue lo stesso tempo del film, con una maschera sfumata che avanza col fronte; un clip-path faceva un taglio netto.
Librerie
GSAP 3.15.0, Geist (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.
