Il pulsante che copia

Pulsanti, Testo, SVG, FisicaGSAP, CanvasImpegnativaPeso compresso: Demo 8,2 KBGSAP 28 KBGratisScarica lo zip

Un comando di installazione col suo pulsante Copy: al clic i caratteri si sollevano uno dopo l'altro e volano in una scia dentro l'icona degli appunti, che si riempie come un bicchiere con l'onda che sciaborda; piena, diventa una spunta che si disegna e la scritta mescola le lettere in Copied. Poi i caratteri ricadono al loro posto. Copia davvero.

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 copy button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the snippet: pressed, Copy puts the command on the clipboard while its characters lift one after another, fly
         in a stream into the clipboard icon and fill it like a glass; the icon turns into a tick that draws itself,
         the label scrambles into Copied, and the characters drop back into their places -->
    <figure class="snippet" data-snippet data-autoclic>
      <div class="snippet__row">
        <pre class="snippet__code"><code data-code><span class="tok tok--prompt" aria-hidden="true">$</span> <span data-cmd-text>npm install gsap</span></code></pre>
        <button class="copy" type="button" aria-label="Copy the command" data-copy>
          <svg class="copy__icon" viewBox="0 0 24 24" aria-hidden="true">
            <defs>
              <clipPath id="copy-board"><rect x="5.6" y="5.6" width="12.8" height="15.3" rx="2.2"/></clipPath>
            </defs>
            <g data-board>
              <g clip-path="url(#copy-board)"><path class="copy__liquid" d="" data-liquid/></g>
              <rect class="copy__line" x="5.6" y="5.6" width="12.8" height="15.3" rx="2.2"/>
              <rect class="copy__clip" x="8.6" y="3.4" width="6.8" height="3.6" rx="1.2"/>
            </g>
            <path class="copy__tick" pathLength="1" d="M6.5 12.6l3.6 3.6 7.4-7.6" data-tick/>
          </svg>
          <span class="copy__label" data-label>Copy</span>
        </button>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </figure>
  </main>
  <!-- the characters in flight, over the whole page -->
  <div class="flight" aria-hidden="true" data-flight></div>

  <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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un blocco di codice scuro con il comando $ npm install gsap, colorato per parti, e a destra un pulsante Copy con l'icona degli appunti. Col mouse sopra il pulsante si schiarisce e la mollettina degli appunti si alza appena. Premendolo, il comando va davvero negli appunti e i suoi caratteri, dal primo all'ultimo, si sollevano dal loro posto a onda e volano su una curva dentro l'icona, ognuno coi suoi colori e una scia sottile che svanisce dietro. Nell'icona sale il verde come acqua in un bicchiere: a ogni carattere che cade la superficie si inclina e ondeggia. Piena, l'icona si rimpicciolisce, una spunta verde si disegna al suo posto e la scritta passa da Copy a Copied mescolando le lettere. Dopo un momento la spunta se ne va, torna l'icona vuota e i caratteri ricadono al loro posto dall'alto, uno dopo l'altro, con un piccolo rimbalzo.

Come funziona

Un carattere, un elemento

Il comando è scritto dallo script un carattere per span, con la classe della sua parte (il programma, il verbo, il pacchetto) per il colore. Al clic ogni carattere ha una copia in uno strato fisso sopra la pagina, messa esattamente dove sta l'originale, che si nasconde: è la copia che vola, così il testo vero non si muove mai e resta selezionabile.

Il volo su una curva

Ogni copia si solleva di LIFT pixel, poi segue una curva di Bézier quadratica dalla sua casa alla bocca dell'icona, con il punto di controllo ARC pixel sopra (mai oltre il bordo alto del blocco, dove il fondo chiaro la farebbe sparire: per questo il comando ha 48 pixel di blocco scuro sopra e sotto, 44 sul telefono) e un po' diverso per ognuna. GSAP muove solo un numero da 0 a 1 per ogni carattere, STAGGER secondi dopo il precedente, con power1.in: un ciclo sul ticker ne calcola la posizione, la rotazione e la misura che cala.

La scia

Ogni carattere tiene gli ultimi punti per cui è passato (di più con TRAIL alto) e un canvas a tutto schermo li ridisegna a ogni fotogramma come una linea che si assottiglia e sbiadisce verso la coda, nel colore del carattere. Arrivato, la scia si svuota dalla coda.

Il bicchiere

Dentro l'icona, tagliato dalla sua forma con un clipPath, c'è un tracciato SVG ridisegnato a ogni fotogramma: il livello sale a ogni carattere che arriva, e la superficie è una retta inclinata più un'onda, entrambe su piccole molle smorzate. Ogni carattere che cade dà un colpo alla molla (SLOSH), e l'onda si calma da sola; vicino al fondo e all'orlo l'ampiezza si stringe per non uscire.

Copied, e ritorno

Pieno, l'icona si rimpicciolisce e una spunta si disegna con stroke-dashoffset; la scritta cambia mescolando: ogni lettera passa per qualche carattere a caso prima di fermarsi, da sinistra, e la sua scatola si allarga di un ch per lettera (il carattere è monospaziato). Dopo COPIED secondi i caratteri ricadono da 18 pixel più su con back.out. Gli appunti si scrivono con navigator.clipboard e, se il browser dice no, con una textarea nascosta ed execCommand; se non va nemmeno così il comando viene selezionato.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STAGGER`	script.js	`0.028`	I secondi fra un carattere che si solleva e il successivo.
`FLIGHT`	script.js	`0.55`	I secondi che un carattere impiega a volare dentro gli appunti.
`ARC`	script.js	`48`	Quanto in alto salgono i caratteri lungo la curva, in pixel (mai oltre il bordo alto del blocco).
`LIFT`	script.js	`9`	Di quanti pixel si solleva un carattere dal suo posto prima di volare.
`TRAIL`	script.js	`0.6`	Quanto resta la scia dietro un carattere in volo, da 0 a 1.
`SLOSH`	script.js	`1`	Quanto sciaborda il liquido quando i caratteri ci cadono dentro.
`COPIED`	script.js	`1.6`	I secondi in cui il pulsante dice Copied prima che i caratteri tornino.

Provali nel Playground

Quando usarla

Per il pulsante Copy accanto a un comando breve, una chiave API, un codice sconto o un indirizzo da incollare: dove copiare è l'azione principale della pagina e vale la pena farla vedere. Per blocchi lunghi meglio far volare solo la prima riga: centinaia di caratteri in volo diventano una nuvola.

Sul telefono

Il blocco si stringe alla larghezza dello schermo e il comando scende a 13,5 pixel; il comando scorre di lato dentro il suo riquadro se non ci sta, senza far sforare la pagina. Il tocco fa come il clic, e il volo è lo stesso, più corto perché il pulsante è più vicino.

Con il movimento ridotto

I caratteri non volano: il comando resta fermo, l'icona lascia il posto alla spunta e la scritta diventa Copied subito, senza mescolare le lettere; poi tutto torna com'era in dissolvenza. Il pulsante non si stringe sotto la pressione.

Trappole

Far volare i caratteri veri sposta il testo intorno e rompe la selezione: volano le copie in uno strato fisso sopra la pagina, misurate con getBoundingClientRect, e l'originale diventa solo trasparente, così occupa ancora il suo posto.
Con le curve libere i caratteri bianchi del programma salivano sopra il blocco, sul fondo chiaro, e sparivano. Il punto più alto della curva è tenuto 14 pixel sotto il bordo del blocco.
La scia aggiungeva un punto a ogni fotogramma anche quando il tempo era fermo (pausa del banco): restava una linea lunghissima fra due posizioni lontane. Un punto si aggiunge solo se il carattere si è spostato.
Solo un clic vero può scrivere negli appunti: navigator.clipboard rifiuta i clic finti e le pagine senza https. Il clic dell'anteprima fa l'animazione senza toccare gli appunti, e un rifiuto del browser passa alla textarea nascosta e poi alla selezione.
La scritta Copy e Copied ha larghezze diverse: con la larghezza libera il pulsante saltava a ogni lettera mescolata. La scatola della scritta è larga quanti caratteri ha la parola nuova (in ch, il carattere è monospaziato) e ci arriva con una transizione.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0.

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