Il bottone che non vuole

Testo, HoverSolo CSSFacilePeso compresso: Demo 5,2 KBsenza librerieGratisScarica lo zip

Un bottone che dice di no due volte prima di copiare l’indirizzo, e ogni volta la frase si decodifica lettera per lettera da glifi a blocchi.

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="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il bottone che non vuole</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="pagina">
    <header class="testa">
      <p class="marchio">Scarti</p>
      <p class="testa__riga">Mostra di foto venute male</p>
    </header>

    <section class="invito" aria-labelledby="titolo">
      <h1 class="invito__titolo" id="titolo">Hai una foto venuta&nbsp;male?</h1>
      <p class="invito__testo">Mandacela: la appendiamo in sala, accanto alle altre. Se è venuta proprio male, anche meglio.</p>
      <!-- il bottone dice di no due volte; al terzo clic cede e copia l'indirizzo -->
      <button class="bottone" type="button" data-bottone data-autoclic><span class="bottone__testo" data-testo>Non scriverci</span></button>
      <p class="esito" data-esito aria-live="polite"></p>
    </section>

    <footer class="piede">
      <a href="#" data-mescola>Orari e indirizzo</a>
      <a href="#" data-mescola>Instagram</a>
      <a href="#" data-mescola>Per la stampa</a>
    </footer>
  </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.

25 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 bottone che non vuole» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina dei contatti di una mostra, tutta blu: «Hai una foto venuta male?», e un bottone color carta che dice «Non scriverci». Al primo clic risponde «Sei sicuro?» e si ritrae, al secondo «Dico sul serio» e trema di lato, al terzo cede: «Hai vinto. Copiato.», e solo adesso l’indirizzo va negli appunti. Il testo non cambia di colpo: ogni lettera gira fra glifi a blocchi e atterra sulla nuova, da sinistra a destra. Dopo due secondi e mezzo il bottone dimentica tutto e ricomincia. Al passaggio del puntatore la frase si rimescola, e così i link in basso.

Come funziona

Tre frasi, una sola copia

Il bottone conta i clic: ognuno passa alla frase dopo, e solo al terzo parte navigator.clipboard.writeText, con il ripiego di una textarea invisibile e execCommand('copy'). I clic che non vengono da una persona, con e.isTrusted falso, non toccano mai gli appunti. L’ultima frase resta 2,4 secondi; a metà strada il bottone dimentica dopo 4.

La decodifica

Per ogni carattere si sceglie un inizio a caso fino a 0,2 secondi e una fine da 0,1 a 0,34 secondi dopo, più 12 ms per ogni posizione: le fini slittano verso destra e la frase si legge da sinistra. Prima dell’inizio c’è la lettera vecchia, fra inizio e fine un glifo a blocchi, dopo la lettera nuova. Il glifo cambia solo con probabilità 0,3 a ogni fotogramma.

Spazi fermi e larghezza bloccata

Gli spazi non si mescolano mai: la frase tiene la sua forma anche mentre dentro tutto si muove. Il bottone si misura una volta con tutte e quattro le frasi e prende la larghezza della più lunga, così le frasi cambiano e lui no. I glifi a blocchi arrivano da un altro carattere e sono più larghi delle lettere: si misurano una volta, e ognuno sta in uno span stretto con uno scaleX alla larghezza media di una lettera, con un margine negativo che restituisce lo spazio tolto.

Il corpo

Ogni rifiuto ha la sua reazione, con la Web Animations API: al primo il bottone si stringe a 0,93 e torna, al secondo trema di lato di −9, 8, −6 e 3 px, al terzo si gonfia a 1,07. Al passaggio del puntatore la frase si ridecodifica uguale a sé stessa, e i link del piede fanno lo stesso.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FRASI`	script.js	`4`	Le quattro frasi del bottone, dal primo no alla resa.
`INDIRIZZO`	script.js	`'scarti@example.com'`	L’indirizzo che finisce negli appunti al terzo clic: è un segnaposto.
`RESTA, PAZIENZA`	script.js	`2.4, 4`	Dopo quanti secondi il bottone dimentica, alla fine e a metà strada.
`GLIFI`	script.js	`'▚▞▖▗▘▝░▒▓█'`	I glifi a blocchi che girano durante la decodifica.
`ATTESA, GIRO`	script.js	`0.2, [0.1, 0.34]`	Il ritardo massimo prima che un carattere giri, e quanto gira.
`CAMBIA`	script.js	`0.3`	La probabilità che un glifo cambi a ogni fotogramma.

Provali nel Playground

Quando usarla

Per un contatto, un’iscrizione o qualsiasi bottone che può permettersi un po’ di ironia. La decodifica da sola va bene per i link e le etichette di un sito dal carattere tecnico.

Sul telefono

Uguale: si tocca tre volte. Il rimescolamento al passaggio non c’è, perché al telefono il puntatore non passa.

Con il movimento ridotto

Niente glifi e niente reazioni: le frasi cambiano e basta, e l’indirizzo si copia sempre al terzo clic.

Trappole

Se un vecchio gestore del clic copia al primo clic e quello nuovo al terzo, partono tutti e due: l’indirizzo arriva negli appunti prima che il bottone abbia finito di fare il difficile. Un solo gestore.
Un glifo nuovo a ogni fotogramma, a 120 Hz, è una nebbia grigia: si cambia con una probabilità, così ogni blocco resta leggibile per qualche fotogramma.
Se si mescolano anche gli spazi la frase diventa una barra di rumore e non la si vede più risolversi.
I glifi a blocchi non ci sono nel carattere della pagina e arrivano da quello di sistema, più larghi: senza stringerli la frase che si decodifica sborda dal bottone.
I clic finti di uno script non devono scrivere negli appunti di nessuno: si controlla e.isTrusted.

Librerie

Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,2 KB, e non servono librerie.

Collaudo

Provata il 28 settembre 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.