Il pulsante col nodo al filo

Pulsanti, SVG, FisicaGSAPMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su bianco: il Remind me di una diretta, con sotto la pillola un filo sottile dai capi sfilacciati. Sotto il puntatore il filo si incurva e accenna un ricciolo. Premuto, il filo fa un cappio e lo stringe in un nodo, come il nodo al dito per non dimenticare: i capi scivolano verso il centro, il nodo diventa vermiglio, il filo vibra una volta come una corda tesa e arriva Reminder set con la spunta. Premuto di nuovo, il nodo si scioglie e il filo torna dritto.

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 knot button</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 knot button: the Remind me of a live stream, on white. Under the pill runs a thin thread with frayed ends.
         Pressed, the thread curls into a loop and pulls it tight into a knot, like a knot tied round a finger so as not
         to forget; the knot turns vermilion, the thread trembles and Reminder set lands. Pressed again, it comes undone -->
    <div class="knot" data-knot>
      <div class="knot__frame" data-frame>
        <button class="knot__btn" type="button" data-btn data-autoclic aria-pressed="false">
          <span class="knot__words">
            <span class="knot__word" data-word="rest">
              <svg class="knot__bell" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.2c-2.3 0-3.9 1.8-3.9 4.1v2.6L2.8 11h10.4l-1.3-2.1V6.3C11.9 4 10.3 2.2 8 2.2Z M6.6 12.6a1.5 1.5 0 0 0 2.8 0"></path></svg>
              <span data-rest-text>Remind me</span>
            </span>
            <span class="knot__word knot__word--done" data-word="done" aria-hidden="true">
              <svg class="knot__tick" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 8.6 6.3 12.1 13.5 4.3" data-tick></path></svg>
              <span data-done-text>Reminder set</span>
            </span>
          </span>
        </button>
        <svg class="knot__thread" aria-hidden="true" data-thread>
          <path class="knot__fray" data-fray></path>
          <path class="knot__line" data-line></path>
          <path class="knot__over" data-over></path>
        </svg>
      </div>
      <p class="knot__note" data-note>Live stream · Thu 6 Nov, 18:00</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.

18 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 col nodo al filo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola alta 60 pixel col contorno sottile grigio chiaro e dentro una piccola campanella disegnata a filo e Remind me in Archivo; sotto la pillola corre un filo nero sottile, più lungo della pillola, coi capi sfilacciati in tre peli; sotto ancora la riga piccola Live stream · Thu 6 Nov, 18:00. Passandoci sopra il contorno diventa nero, la scritta si allarga e prende peso su una molla, e il filo si incurva un poco e accenna un ricciolo nel mezzo, come se stesse per fare un nodo. Premuta, la pillola cede e torna con un rimbalzo; il filo si arrotola in un cappio vero sotto la pillola, poi lo stringe: i due capi scivolano verso il centro, il cappio si chiude in un piccolo nodo che diventa vermiglio, e tutto il filo vibra una volta, come una corda tirata. Le parole si scambiano: Reminder set arriva con una spunta vermiglia, prima larga e leggera, poi stretta e pesante, e la riga sotto dice We’ll ping you an hour before. Premuta di nuovo, il nodo si allenta, torna cappio e il cappio si srotola in un filo dritto.

Come funziona

Un filo che è una cicloide

Il filo è un tracciato SVG di 220 punti ricostruito a ogni fotogramma. In una finestra larga D al centro, ogni punto si sposta avanti di A per sin(φ) e in giù di A per (1 − cos φ), con φ che va da 0 a 2π lungo la finestra: è una cicloide allungata. Quando A supera D diviso 2π il filo, in fondo alla curva, torna indietro e incrocia sé stesso vicino alla riga: è il cappio.

Stringere il nodo

Stringere è la stessa curva con A e D più piccoli (da LOOP a KNOT pixel, e la finestra da 30 a 11), mentre i due capi entrano verso il centro di quanto il cappio restituisce, così il filo sembra della stessa lunghezza. GSAP muove quattro numeri: curl, tight, la vibrazione e l’opacità del tratto vermiglio, che ridisegna solo la finestra del nodo sopra il filo nero.

La vibrazione

Quando il nodo si chiude, a ogni punto si aggiunge in verticale sin(π s) per sin(3π s) per un’ampiezza che GSAP porta da TREMBLE a zero con elastic.out: la corda oscilla e si ferma. La stessa curva, più piccola, quando il nodo si scioglie.

Le parole

Archivo ha gli assi di larghezza e di peso: sotto il puntatore Remind me va a 108 e 480; Reminder set entra larga 124 e peso 300 e atterra stretta 98 e peso 600 con back.out, mentre la spunta si disegna col dashoffset.

Accessibile

È un button vero con aria-pressed; una riga aria-live annuncia il promemoria; il fuoco da tastiera ha l’anello solo con la tastiera. Durante il nodo i clic si ignorano. Col movimento ridotto il filo passa da dritto a annodato in dissolvenza e le parole si scambiano senza rimbalzi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Remind me`	Le parole a riposo.
`DONE`	script.js	`Reminder set`	Le parole a nodo fatto.
`NOTE`	script.js	`Live stream · Thu 6 Nov, 18:00`	La riga piccola sotto la pillola.
`NOTE_DONE`	script.js	`We’ll ping you an hour before`	La riga piccola a nodo fatto.
`LOOP`	script.js	`13`	Quanto diventa grande il cappio prima di stringersi, in pixel.
`KNOT`	script.js	`4.2`	Quanto resta grande il nodo stretto, in pixel.
`TIE`	script.js	`0.55`	I secondi in cui il filo si arrotola nel cappio.
`PULL`	script.js	`0.5`	I secondi in cui il cappio si stringe.
`TREMBLE`	script.js	`3`	Quanto vibra il filo quando il nodo si chiude, in pixel.

Provali nel Playground

Quando usarla

Per un pulsante che ricorda qualcosa: il promemoria di una diretta o di un evento, l’avviso quando torna disponibile un prodotto, un elenco da salvare per dopo, il segnalibro di un articolo.

Sul telefono

La pillola si stringe fino a 42 pixel dai bordi e il filo si ricalcola sulla larghezza vera, sempre un poco più lungo della pillola. Il tocco fa e scioglie il nodo come il clic; il ricciolo del passaggio c’è solo col mouse.

Con il movimento ridotto

Il filo passa da dritto a annodato in dissolvenza, il nodo diventa vermiglio senza vibrare e le parole si scambiano senza rimbalzi.

Trappole

Un cappio con una formula sola: senza la cicloide allungata servivano curve di Bézier a mano per ogni istante; con A e D come soli numeri il cappio nasce, cresce e si stringe in modo continuo, e il passaggio da filo dritto a nodo è un tween e basta.
Il filo deve sembrare della stessa lunghezza mentre il cappio si stringe: i capi entrano verso il centro di (LOOP × 1,9 − KNOT × 1,6) per curl, che è circa quanto filo il cappio restituisce.
La finestra del nodo è ridisegnata due volte, nera nel filo e vermiglia sopra con la sua opacità: colorare tutto il filo per un nodo di pochi pixel non si leggeva.
Il filo va ricalcolato quando arriva il carattere e quando la pillola cambia misura (ResizeObserver), perché i capi stanno sempre un poco oltre la pillola.

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