Il pulsante che si ricostruisce

Pulsanti, Testo, Fisica, SVGGSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Rebuild di uno strumento di deploy, scritto con un carattere a tratti fatto da noi: ogni lettera è un'asta, un arco, un anello, disegnati in SVG a ogni fotogramma. Al clic la parola si smonta nei suoi tratti, che cadono in un mucchio sul fondo della pillola, rotolano e si fermano; poi risalgono uno alla volta, piegandosi in volo nella forma nuova, finché la parola dice Rebuilt e la spunta arriva per ultima.

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 button that rebuilds itself</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button that rebuilds itself: the Rebuild button of a deploy tool. Its words are not a font file: every
         letter is a few strokes, straight or round, drawn as SVG paths. A click breaks the word into its strokes, they
         fall into a heap at the bottom of the pill, and then fly back up one by one, bending on the way, to spell the
         new words -->
    <div class="kit" data-kit>
      <button class="kit__btn" type="button" data-btn data-autoclic>
        <svg class="kit__art" aria-hidden="true" data-art>
          <g class="kit__guides" data-guides></g>
          <g class="kit__pieces" data-pieces></g>
        </svg>
        <span class="sr" data-name>Rebuild</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.

26 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 che si ricostruisce» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola blu cianografia alta 60 pixel, con la freccia di ricarica e Rebuild in tratti color carta, un sans geometrico a filo tondo. Non è un file di caratteri: ogni lettera è fatta di pochi tratti, dritti o curvi, come li costruisce un disegnatore di caratteri su una griglia (la b è un'asta e un anello, la e una barra e quasi tutto un cerchio, la R un'asta, due barre, un arco e una gamba). Quando il puntatore entra, un'onda di scosse attraversa la parola dal lato d'entrata: ogni tratto si storce un poco e torna a posto con un brivido, come un pezzo sciolto, e compaiono le linee guida del carattere (linea di base, altezza delle minuscole, altezza delle maiuscole), disegnate dal centro verso fuori; passandoci sopra, i tratti vicini tintinnano. Al clic la parola si smonta da sinistra a destra: ogni tratto salta via, spinto lontano dal punto cliccato, e cade sul fondo della pillola, dove rimbalza, scivola, si impila sugli altri; gli anelli rotolano. Sciolti, i tratti si spengono in un azzurro grigio. Poi parte la ricostruzione: i tratti lasciano il mucchio uno alla volta, nell'ordine delle lettere, e volano ad arco al loro posto riprendendo il colore carta; strada facendo si allungano, si accorciano e si piegano nella forma del posto che li aspetta (un tratto dritto può curvarsi nel ricciolo della t, un anello aprirsi in un arco), finché la parola dice Rebuilt e per ultimi arrivano i due tratti della spunta, verde menta. La parola si assesta con un piccolo schiacciamento elastico. Dopo un momento, o a un clic, solo i tratti che cambiano tornano indietro: il ricciolo della t si richiude nell'anello della d, la spunta si piega nella freccia, e il pulsante dice di nuovo Rebuild. Al telefono il tocco manda la stessa onda di scosse e ricostruisce.

Come funziona

Un carattere fatto di tratti

Ogni lettera è un elenco di tratti su una griglia dove le minuscole sono alte 10 e le maiuscole 14: ln(x1, y1, x2, y2) è un tratto dritto, arc(cx, cy, r, da, a) un arco di cerchio in gradi, dot(x, y) un punto. Ci sono tutte le lettere, le cifre e la punteggiatura comune, quindi REST e DONE possono dire qualunque cosa. La spaziatura nasce dalla forma dei lati: dritto, tondo, aperto, diagonale, o che sporge sul vicino come il braccio della f e il ricciolo della j. Il tratto ha le punte tonde, così un tratto lungo zero è il puntino della i.

Quattro numeri per ogni tratto

Ogni tratto si disegna a ogni fotogramma da quattro numeri: dov'è il suo centro, da che parte punta lì, quanto è lungo e quanto si piega (uno diviso il raggio). Una barra è un tratto che non si piega, un anello uno che si piega fino a fare il giro; quindi qualunque tratto può diventare qualunque altro interpolando i quattro numeri. Il percorso SVG è una linea, oppure archi di un quarto di giro al massimo, perché un arco SVG non sa fare un cerchio intero.

Il mucchio

Al clic ogni tratto diventa un corpo rigido fatto di una fila di perline, un po' più vicine di quanto sono larghe, così niente ci passa in mezzo. Verlet muove le perline a passi di 1/240 di secondo; poi, tre volte: le perline di tratti diversi si spingono via, quelle uscite dalla pillola tornano dentro (la pillola è uno stadio: due semicerchi e una striscia), e ogni tratto riprende la sua forma, girato e spostato in modo da stare il più vicino possibile alle sue perline (shape matching, Müller e altri, 2005). Rimbalzo BOUNCE e presa GRIP si calcolano sulle perline che hanno toccato il fondo, con la velocità che avevano prima dell'urto: per questo gli anelli rotolano e le barre scivolano. Quando il mucchio sta fermo la fisica si spegne.

Chi va dove

Per la parola nuova ogni posto deve avere un tratto. Il costo di una mossa è la strada da fare, più quanto il tratto deve allungarsi e piegarsi, più un prezzo fisso per muoversi del tutto; l'algoritmo ungherese (Kuhn e Munkres) trova la spartizione col costo totale più basso. Così ogni tratto va al posto più vicino con la forma più simile, e nel ritorno si muovono solo i tratti che cambiano. Se le parole hanno più o meno tratti, quelli che avanzano si restringono a niente e quelli che mancano nascono da un punto.

Il volo

I tratti lasciano il mucchio uno alla volta, in BUILD secondi in tutto, nell'ordine delle lettere e con l'icona per ultima. Ogni volo dura FLIGHT secondi: il centro corre su una curva di Bézier che si alza di LIFT pixel, con un back.out che arriva un filo oltre e torna; la forma cambia a metà strada con un power2.inOut. Il tratto gira dalla parte più corta, sapendo che un tratto girato di mezzo giro e piegato al contrario è lo stesso tratto. Nel mucchio i tratti si spengono nel colore --loose e riprendono il loro colore in volo, quindi la parola si accende mentre si ricompone.

Le scosse e le linee guida

Entrando, il puntatore manda un'onda di scosse da dove arriva: ogni tratto riceve una spinta di rotazione e un salto verso l'alto, e una molla rigida e poco smorzata (900 di rigidezza, 15 di smorzamento) lo riporta a posto con un brivido. Passando sopra, ogni tratto vicino riceve una torsione: il prodotto vettoriale fra dove sta rispetto al puntatore e dove va il puntatore, più una torsione sua. Intanto le tre linee guida si disegnano dal centro verso fuori animando i loro estremi. Al telefono il tocco manda l'onda, e la pressione col mouse ne manda una più piccola.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`REST`	script.js	`Rebuild`	La scritta a riposo.
`BUSY`	script.js	`Rebuilding`	Quello che sente chi usa un lettore di schermo mentre i tratti volano.
`DONE`	script.js	`Rebuilt`	La scritta quando la ricostruzione è finita.
`SIZE`	script.js	`11`	L'altezza delle minuscole, in pixel (le maiuscole sono alte 1,4 volte tanto).
`WEIGHT`	script.js	`2.3`	Lo spessore dei tratti, in pixel.
`TRACKING`	script.js	`0`	Spazio in più fra le lettere, in pixel.
`KICK`	script.js	`1`	Quanto forte vengono lanciati i tratti quando la parola si smonta: 0, cadono e basta.
`GRAVITY`	script.js	`2400`	La forza che tira giù i tratti, in pixel al secondo quadrato.
`BOUNCE`	script.js	`0.3`	Quanto rimbalzano i tratti sul fondo: 0 per niente, 1 come la gomma.
`GRIP`	script.js	`0.3`	Quanto il fondo trattiene i tratti: con più presa gli anelli rotolano, con meno le barre scivolano.
`BUILD`	script.js	`1.4`	I secondi della ricostruzione, dal primo tratto che lascia il mucchio all'ultimo al suo posto.
`FLIGHT`	script.js	`0.5`	I secondi del volo di un tratto dal mucchio al suo posto.
`LIFT`	script.js	`9`	Quanto si alza l'arco dei voli, in pixel.
`RATTLE`	script.js	`1`	Quanto tintinnano i tratti sotto il puntatore e all'entrata: 0 per niente.
`BACK`	script.js	`2.6`	I secondi in cui il pulsante dice Rebuilt prima di tornare a Rebuild.

Provali nel Playground

Quando usarla

Per l'azione che rifà qualcosa da capo in uno strumento per chi lavora col codice o coi contenuti: ricostruire un sito, rigenerare un indice, ricompilare, ripubblicare, rifare un'anteprima. Il carattere ha tutte le lettere e le cifre, quindi la stessa idea va bene per Redeploy, Regenerate, Sync now o Publish. Sta bene dove si parla di costruire: strumenti per sviluppatori, studi di tipografia, siti di architettura. È un pulsante da far vedere, uno per pagina.

Sul telefono

La pillola è alta 60 pixel come gli altri pulsanti e larga quanto la parola più lunga; se lo schermo è stretto il carattere rimpicciolisce, e con lui lo spessore dei tratti. Il tocco manda l'onda di scosse da dove ha toccato il dito, e il clic smonta la parola lanciando i tratti lontano da quel punto.

Con il movimento ridotto

Niente cadute, niente voli e niente scosse. Al clic la parola vecchia svanisce e la nuova compare un tratto alla volta in dissolvenza, nello stesso ordine e nello stesso tempo della ricostruzione, così si vede ancora che il lavoro procede; il ritorno è una dissolvenza incrociata. Le linee guida compaiono in dissolvenza, già lunghe, e la pillola premuta si scurisce appena invece di rimpicciolire.

Trappole

La prima idea per l'hover allontanava i tratti dal centro della loro lettera sotto il puntatore: l'asta della b si staccava dall'anello e la parola si leggeva «Relouild». Ora i tratti si storcono e tornano con un brivido, restando attaccati, e il fatto che siano pezzi lo dicono le linee guida e il tintinnio.
La prima molla del tintinnio (420 di rigidezza, 22 di smorzamento) spostava i tratti di un pixel lentamente: sembrava una deriva, non un pezzo sciolto. Con 900 e 15 e un'onda di scosse all'entrata il brivido si vede.
Un puntatore che passa in orizzontale alla stessa altezza dei tratti dava torsione zero (il prodotto vettoriale si annulla): ogni tratto ha anche una torsione sua, proporzionale alla velocità.
Il rimbalzo va calcolato con la velocità di prima dell'urto: dopo aver riportato la perlina dentro la pillola la sua velocità contro il fondo è già sparita, e niente rimbalzava.
Un clic durante l'entrata o il ritorno andava perso, e l'anteprima del catalogo, quando registra, clicca dopo 0,4 secondi: ora il clic ferma i tratti dove sono e la parola si smonta da lì.
Nel ritorno la traversa della t vola fino alla freccia e passava all'altezza delle lettere, coprendole per un attimo: i voli lunghi ora si alzano sopra le ascendenti, ma mai fuori dalla pillola.
Le linee guida fatte crescere con una scala SVG comparivano per un fotogramma fuori dalla pillola: ora si animano i loro estremi x1 e x2.
Il braccio della f e il ricciolo della j allargano il riquadro della lettera e lasciavano buchi nella parola: i loro lati hanno una spaziatura negativa, che sporge sul vicino.
La prima freccia di ricarica, piccola e con la punta a L, sembrava una C: ora è un arco di 300 gradi con la punta a due ali, larga quanto una maiuscola.

Librerie

GSAP 3.15.0.

Compressi con gzip, i tre file della demo pesano 15 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.