Il pulsante da tenere premuto che svuota le lettere

Pulsanti, Testo, HoverGSAP, Solo CSSMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero, solo tipografia e forma: il Hold to delete di una bozza. Mentre lo tieni premuto le lettere si svuotano una alla volta da sinistra a destra, dal pieno al contorno, e si assottigliano; la pillola si stringe, il bordo si scalda verso il vermiglio e alla fine trema. Se lasci prima, le lettere si riempiono di nuovo con una piccola molla. Se tieni fino in fondo, uno scatto: la pillola si chiude in un cerchio con una spunta disegnata, poi torna.

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 hold-to-delete button that empties its letters</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the hold-to-delete button, on black, type and shape only. While you hold it, the letters drain one by one from
         left to right, from solid to outline, and grow thinner; the pill tightens a little and trembles near the end.
         Let go early and the letters fill back up on a spring. Hold to the end: a snap, the pill closes into a circle
         with a drawn tick, then opens back into the pill -->
    <div class="hold" data-hold>
      <button class="hold__btn" type="button" data-btn aria-describedby="hold-note">
        <span class="hold__words" data-words aria-hidden="true"></span>
        <span class="sr" data-label>Hold to delete</span>
        <svg class="hold__mark" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 12.6 10.1 17 18.6 7.4" data-mark></path></svg>
      </button>
      <p class="hold__note" id="hold-note" data-note>Draft · 3 photos</p>
      <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.

17 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 da tenere premuto che svuota le lettere» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola alta circa 60 pixel col bordo di un pixel grigio scuro e dentro Hold to delete in Archivo, peso 620; sotto, la riga piccola Draft · 3 photos. Ogni lettera è disegnata due volte: il contorno sotto e la lettera piena sopra. Tenendo premuto, il pieno scende fuori dalle lettere dall’alto verso il basso, una dopo l’altra da sinistra a destra, con un filo vermiglio sulla sua superficie, e ogni lettera svuotata si assottiglia fino al peso 220; la riga sotto dice Release to cancel. Intanto la pillola si stringe un poco, il bordo e i contorni si scaldano verso il vermiglio, e nell’ultimo quarto la pillola trema. Lasciando prima, le lettere si riempiono di nuovo da destra a sinistra e ognuna, appena piena, fa un piccolo saltello su una molla. Tenendo fino in fondo, uno scatto: la pillola si chiude in un cerchio vermiglio e dentro si disegna una spunta, la riga dice Deleted; dopo un momento il cerchio si riapre nella pillola e le lettere si riempiono. Col mouse sopra le lettere si allargano un poco sull’asse wdth.

Come funziona

Un numero solo

Tutto dipende da p, l’avanzamento della pressione da 0 a 1: GSAP lo porta a 1 in HOLD secondi mentre tieni premuto, e a ogni fotogramma il ticker ridisegna lettere, pillola e bordo da quel numero.

Le lettere che si svuotano

Ogni lettera ha due strati: il contorno, con text-stroke e il riempimento trasparente, e la lettera piena sopra, tagliata con clip-path inset dall’alto. Per la lettera i lo svuotamento è (p × (n − 1 + SPAN) − i) / SPAN, fra 0 e 1: con SPAN maggiore di 1 più lettere scendono insieme e l’onda è morbida.

Il peso

Archivo ha gli assi di peso e di larghezza: una lettera piena è a 620, vuota scende a THIN; contorno e pieno stanno nello stesso elemento, così cambiano peso insieme e restano sovrapposti.

Lo scatto

Arrivato p a 1, la pillola si stringe in un attimo, la sua larghezza va a quella dell’altezza con power3.inOut e la scala torna con elastic.out: è un cerchio; la spunta si disegna col dashoffset. Poi la larghezza torna quella misurata e p scende a 0.

Accessibile

È un button vero, con l’etichetta per il lettore di schermo e una riga aria-live che annuncia Deleted; si tiene premuto anche con Spazio o Invio. Col movimento ridotto la pillola non si stringe né trema e il cerchio arriva in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Hold to delete`	Le parole sulla pillola.
`NOTE`	script.js	`Draft · 3 photos`	La riga piccola sotto la pillola.
`NOTE_HOLD`	script.js	`Release to cancel`	La riga piccola mentre si tiene premuto.
`NOTE_DONE`	script.js	`Deleted`	La riga piccola a cosa fatta.
`HOLD`	script.js	`1.7`	I secondi da tenere premuto.
`SPAN`	script.js	`2.2`	Quante lettere si svuotano insieme: la morbidezza dell’onda.
`THIN`	script.js	`220`	Il peso a cui scende una lettera vuota (piena è 620).
`SQUEEZE`	script.js	`0.06`	Quanto si stringe la pillola mentre si tiene premuto.
`TREMBLE`	script.js	`1.4`	Quanto trema la pillola verso la fine, in pixel.

Provali nel Playground

Quando usarla

Per un’azione che non si torna indietro e va confermata col gesto: eliminare una bozza o delle foto, cancellare un account, inviare un pagamento, svuotare il carrello.

Sul telefono

Si tiene premuto col dito come col mouse: il pulsante blocca lo scorrimento e il menu del tocco lungo. Le misure seguono l’altezza dello schermo; il cambio di larghezza col passaggio c’è solo col mouse.

Con il movimento ridotto

Le lettere si svuotano e si riempiono lo stesso, ma la pillola non si stringe, non trema e non salta; la spunta arriva in dissolvenza.

Trappole

Contorno e pieno devono avere lo stesso peso e lo stesso posto: stanno nello stesso span che porta font-variation-settings, il pieno è in assoluto sopra il contorno.
Il filo vermiglio sulla superficie è un ::after dentro il pieno, appena sotto il bordo del taglio: così si vede solo dove la lettera si sta svuotando.
Per chiudere la pillola in cerchio serve una larghezza in pixel: si misura offsetWidth, si fissa, si anima fino all’altezza e alla fine si toglie con clearProps.
Il tocco lungo del telefono apre il menu del testo e scorre la pagina: touch-action none, user-select none e il contextmenu annullato sul pulsante.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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