I passi con ago e filo

Passi, Transizioni, Fisica, SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 19 KBGSAP 28 KBGratisScarica lo zip

L’ordine di una camicia su misura cucito a mano su una striscia di lana blu: andando avanti l’ago fa un punto filza fino al passo dopo, ci passa sotto mentre il suo anello si chiude e il passo lasciato si ricama a punto pieno; tornando indietro la cucitura salta via in un solo filo che ondeggia e viene strappato indietro; alla fine il filo si tira, la stoffa si arriccia con le pieghe, il filo si taglia e la stoffa torna lunga.

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 needle and thread steps</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/encode-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the steps of a made-to-measure shirt order, sewn by hand on a strip of navy wool. Going on, the needle goes
         into the cloth and runs a seam of stitches to the next step, slips under its patch (the ring closes round it)
         and the step left behind is embroidered in satin stitch. Going back, the needle lifts and slides back, the
         stitches come out and the loose thread whips. At the end the seam is knotted, the thread pulled until the
         cloth gathers, then cut: the cloth springs back -->
    <div class="order" data-order data-autoclic>
      <div class="strip" data-strip>
        <span class="strip__cloth" aria-hidden="true" data-cloth></span>
        <svg class="strip__under" aria-hidden="true" data-under></svg>
        <ol class="steps" aria-label="Shirt order" data-steps>
          <li class="step" data-step>
            <button class="step__hit" type="button" data-hit>
              <svg class="step__patch" viewBox="0 0 40 40" aria-hidden="true">
                <circle class="step__chalk" cx="20" cy="20" r="17.5"/>
                <g class="step__satin" data-satin></g>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 1 37.5 20" data-ring/>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 0 37.5 20" data-ring/>
                <g class="step__icon" transform="translate(9 9) scale(0.9167)">
                  <path d="M5.5 5h13v10.6l-1.63 1.65-1.62-1.65-1.63 1.65-1.62-1.65-1.63 1.65-1.62-1.65-1.63 1.65-1.62-1.65z"/>
                  <path d="M8.6 12.6l4.6-4.6M12.4 12.6l3-3"/>
                </g>
              </svg>
              <span class="step__name" data-name>Fabric</span>
            </button>
          </li>
          <li class="step" data-step>
            <button class="step__hit" type="button" data-hit>
              <svg class="step__patch" viewBox="0 0 40 40" aria-hidden="true">
                <circle class="step__chalk" cx="20" cy="20" r="17.5"/>
                <g class="step__satin" data-satin></g>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 1 37.5 20" data-ring/>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 0 37.5 20" data-ring/>
                <g class="step__icon" transform="translate(9 9) scale(0.9167)">
                  <path d="M8.4 4.2 4.6 6 2.8 11.2l2.9 1.1 1.2-2.6v10h10.2v-10l1.2 2.6 2.9-1.1L19.4 6l-3.8-1.8"/>
                  <path d="M8.4 4.2 9.6 9 12 7.4l2.4 1.6 1.2-4.8C13.4 5.2 10.6 5.2 8.4 4.2zM12 7.4v12.3"/>
                </g>
              </svg>
              <span class="step__name" data-name>Collar</span>
            </button>
          </li>
          <li class="step" data-step>
            <button class="step__hit" type="button" data-hit>
              <svg class="step__patch" viewBox="0 0 40 40" aria-hidden="true">
                <circle class="step__chalk" cx="20" cy="20" r="17.5"/>
                <g class="step__satin" data-satin></g>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 1 37.5 20" data-ring/>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 0 37.5 20" data-ring/>
                <g class="step__icon" transform="translate(9 9) scale(0.9167)">
                  <path d="M3.9 15.6 15.6 3.9l4.5 4.5L8.4 20.1z"/>
                  <path d="M7.4 12.1l1.8 1.8M10 9.5l1.2 1.2M12.6 6.9l1.8 1.8"/>
                </g>
              </svg>
              <span class="step__name" data-name>Fit</span>
            </button>
          </li>
          <li class="step" data-step>
            <button class="step__hit" type="button" data-hit>
              <svg class="step__patch" viewBox="0 0 40 40" aria-hidden="true">
                <circle class="step__chalk" cx="20" cy="20" r="17.5"/>
                <g class="step__satin" data-satin></g>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 1 37.5 20" data-ring/>
                <path class="step__ring" d="M2.5 20A17.5 17.5 0 0 0 37.5 20" data-ring/>
                <g class="step__icon" transform="translate(9 9) scale(0.9167)">
                  <path d="M5.5 6.5h13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z"/>
                  <path d="M3.5 10.2h17M7 14.4h3.6"/>
                </g>
              </svg>
              <span class="step__name" data-name>Payment</span>
            </button>
          </li>
        </ol>
        <!-- the needle and the loose thread, drawn by the script -->
        <svg class="strip__over" aria-hidden="true" data-over></svg>
      </div>

      <div class="foot">
        <p class="foot__say" aria-live="polite"><span class="foot__line" data-say>Choose the cloth for your shirt</span></p>
        <div class="foot__keys">
          <button class="key key--back" type="button" data-back>
            <span class="key__bg" aria-hidden="true"></span>
            <span class="key__clip"><span class="key__text">Back</span></span>
          </button>
          <button class="key key--next" type="button" data-next>
            <span class="key__bg" aria-hidden="true"></span>
            <span class="key__clip"><span class="key__text" data-next-text>Continue</span></span>
          </button>
        </div>
      </div>
    </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.

32 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 «I passi con ago e filo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, da sola, una striscia di lana blu notte con i bordi di sopra e di sotto tagliati a zigzag dalle forbici da sarto, alta 84 pixel, con i quattro passi dell’ordine di una camicia su misura: Fabric con un campione di stoffa, Collar con una camicia col colletto, Fit con un righello e Payment con una carta. Sotto, una riga che dice il passo (Choose the cloth for your shirt) e i pulsanti Back, un bordo scuro, e Continue, rosso con una cucitura appena dentro il bordo come un’etichetta cucita; in hover la pillola si gonfia con un rimbalzo e la scritta si allarga sull’asse della larghezza senza spostare l’altro pulsante. I passi da fare sono segnati col gesso da sarto, un cerchio tratteggiato chiaro e l’icona in gesso, uniti da una linea di gesso; il passo in corso ha un anello di punti rossi e accanto l’ago d’acciaio piantato nella stoffa, con un’asola di filo rosso che scende dall’anello alla cruna; i passi fatti sono ricamati a punto pieno, fili rossi fitti e obliqui con l’icona lasciata scoperta in mezzo. All’arrivo l’ago entra da sinistra, cuce il tratto fino a Fabric e ci si pianta accanto. Andando avanti, l’ago si stacca, si sdraia sulla linea di gesso e cuce: a ogni spazio la punta morde la stoffa, e dietro la cruna il filo si posa a punti; arrivato al passo dopo ci scivola sotto, e il suo anello si chiude dai due lati mentre lo attraversa, poi esce e si pianta di nuovo; intanto il passo lasciato si ricama, un filo di seta dopo l’altro, avanti e indietro. Tornando indietro, l’ago dà uno strattone e la cucitura salta su tutta insieme, un unico filo che ondeggia; l’ago viene tirato indietro con la cruna davanti mentre il filo si riavvolge nel passo raggiunto, prima ondeggiando e poi teso, gli anelli e i ricami che attraversa si disfano, e alla fine resta l’asola di filo sotto la cruna. Un passo fatto si clicca per tornarci, anche di più passi in un colpo. All’ultimo passo il pulsante diventa Place order: l’ago cuce fino in fondo alla striscia, fa un giro intorno alla fine della cucitura e tira; la stoffa si arriccia sul filo, i passi si stringono, le toppe si fanno ovali, i nomi si stringono sull’asse della larghezza del carattere e nella lana vengono su le pieghe; poi il filo si taglia, il capo rimasto si arriccia, la stoffa torna lunga di colpo con un piccolo strappo, l’ago si pianta dritto in fondo e una luce passa sui ricami di seta, uno dopo l’altro. La riga dice Order placed. Cutting starts Monday e il pulsante Start a new order fa saltare via l’intera cucitura in un’onda sola e la riporta a Fabric.

Come funziona

Disegnato da pochi numeri

Sopra e sotto i passi ci sono due SVG che lo script ridisegna a ogni fotogramma solo quando qualcosa si muove. Ogni cucitura ha un numero, fin dove è cucita: i suoi punti, divisi in parti uguali fra un anello e l’altro, si scrivono come tratti fino a lì, e il gesso si vede solo dopo. L’anello è fatto di due archi che partono dalle nove e si incontrano alle tre: ogni arco è una fila di punti scritta in uno stroke-dasharray che si ferma dove l’anello è arrivato. Il punto pieno è una fila di linee oblique, ognuna rivelata con stroke-dashoffset, una dopo l’altra e ognuna al contrario della precedente, come l’ago che va e viene.

L’ago che cuce

L’ago è un fuso d’acciaio con un gradiente e la sua cruna, e un’ombra sfocata. Cucendo, GSAP lo porta lungo la linea e la cruna decide fin dove arriva la cucitura; a ogni spazio fra due punti la punta entra nella stoffa: un clipPath nasconde la parte infilata, in un arco di seno, mentre l’ombra si avvicina. Sotto la toppa del passo dopo lo stesso clipPath nasconde il tratto che ci passa sotto, e l’anello si chiude a mano a mano che la cruna attraversa. Piantato nella stoffa, l’ombra non è più spostata in blocco ma inclinata con una matrice: tocca l’ago sulla punta e se ne allontana verso la cruna, che resta sollevata.

Il filo è una corda di punti

Il filo fra l’anello e la cruna è una corda di 36 punti calcolata a passi di 1/120 di secondo (verlet), col passo del fotogramma limitato a 1/30: ogni punto ha un po’ di peso verso il basso della striscia, la corda si tende fra i suoi due capi e ogni punto si avvicina al centro dei suoi vicini, così piega in curve morbide invece che a zigzag. Tornando indietro, la cucitura sparisce e al suo posto la corda si stende lungo la stessa linea con una spinta a onde; l’ago viene tirato indietro con una curva che accelera, mentre la lunghezza della corda cala più piano: il filo in più ondeggia e si riavvolge finché torna l’asola di sempre.

La stoffa è una catena di molle

Alla fine la striscia diventa una catena: un peso per ogni passo, più la fine, legati da molle morbide quando si stringono (la lana si piega) e dure quando si allungano (la lana non cede), con l’inizio fermo sul nodo. Tirare il filo accorcia la lunghezza a riposo di tutte le molle fino a GATHER: i passi si stringono verso sinistra, la stoffa si accorcia con scaleX, le toppe si schiacciano con la proprietà scale, i nomi si stringono con font-stretch sull’asse wdth del carattere e fra un peso e l’altro vengono su due pieghe, gradienti scuri la cui opacità segue quanto è stretta la stoffa. Tagliato il filo, le molle tornano lunghe e la stoffa si riapre fino al piccolo strappo della molla dura.

Tastiera, ridotto e anteprima

I passi sono una lista ordinata, quello in corso ha aria-current step; i passi fatti sono pulsanti che tornano indietro, gli altri sono disattivati, e ognuno ha un aria-label che dice se è fatto, in corso o da fare. Ogni pressione conta: le mosse aspettano il loro turno (tre al massimo) e quella in corso accelera; mentre l’ordine parte Continue aspetta. Col movimento ridotto l’ago non viaggia: sfuma via e ricompare al posto nuovo, e sfumano solo i punti, gli anelli e i ricami che cambiano. L’anteprima della libreria clicca il componente (un clic senza mano): avanti, avanti, indietro, avanti fino all’ordine e uno nuovo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STITCH`	script.js	`7`	La lunghezza di un punto sulla stoffa, in pixel (gli spazi sono lunghi circa la metà).
`SEW`	script.js	`0.05`	I secondi che l’ago impiega per ogni punto, andando avanti.
`UNPICK`	script.js	`0.42`	I secondi che il filo impiega a uscire da una cucitura, tornando indietro.
`GATHER`	script.js	`0.86`	Quanto si accorcia la stoffa quando alla fine si tira il filo (1: non si arriccia).
`SPRING`	script.js	`1`	Quanto è viva la stoffa quando torna lunga dopo il taglio (0,5 calma, 2 gommosa).
`SLACK`	script.js	`9`	Il filo lento fra l’anello e l’ago a riposo, in pixel.
`LINES`	script.js	`['Choose the cloth for your shirt', 'Pick a collar to go with it', …]`	La riga sotto la striscia, una per ogni passo.
`DONE`	script.js	`'Order placed. Cutting starts Monday'`	La riga quando l’ordine è partito.

Provali nel Playground

Quando usarla

Per una procedura in pochi passi che si vuole far sentire curata: un ordine su misura, un configuratore, la creazione di un account, un acquisto in un negozio di artigiani. Il filo dice dove si è arrivati, quello che è fatto resta ricamato, e la fine si sente davvero finita.

Sul telefono

La striscia prende la larghezza dello schermo meno 16 pixel per lato (358 su un telefono di 390) e resta alta 84: i passi restano in fila con le loro icone, i nomi scendono a 12,5 pixel e non si toccano, le cuciture fra un passo e l’altro hanno quattro punti invece di nove. La riga va sopra, centrata, e Back e Continue si dividono la larghezza, alti 44 pixel. Ogni passo fatto si tocca su tutta la sua colonna.

Con il movimento ridotto

L’ago non viaggia e il filo non ondeggia: l’ago sfuma via dal suo posto e ricompare al nuovo, e sfumano solo le cuciture, gli anelli e i ricami che cambiano, mentre il resto resta fermo. Alla fine niente arricciatura né luce sulla seta: la cucitura in fondo, il capo tagliato e l’ago dritto compaiono in dissolvenza. I pulsanti non si gonfiano, cambiano solo bordo e colore.

Trappole

Tornando indietro il filo tirato fuori doveva ondeggiare dietro l’ago, ma con la cruna davanti l’ago stesso lo copriva tutto: non si vedeva niente. Ora è la cucitura intera a saltare su come un filo solo, legato al passo raggiunto, e l’ago tira l’altro capo.
Il capo del filo tagliato era una corda come le altre, con una curvatura e una direzione imposte: le due regole si contendevano i punti e il capo non si fermava mai, tenendo sveglio il ciclo per sempre. Ora è una curva disegnata da tre numeri (direzione, curvatura, lunghezza) che GSAP porta al suo posto con un rimbalzo.
Con un po’ di peso, in una vista dall’alto, il capo del filo dondolava come un pendolo e usciva dalla stoffa. I capi ora non hanno peso; solo il filo fra anello e ago ne ha un po’, per piegare in un’asola.
Senza rigidezza, il filo corto a riposo con tanti punti si piegava a zigzag. Ogni punto ora si avvicina un poco al centro dei suoi vicini a ogni passo, e il filo fa curve morbide.
Un’ombra spostata in blocco faceva sembrare l’ago posato sulla stoffa, non piantato. Ora l’ombra si inclina con una matrice: coincide con l’ago sulla punta e se ne allontana verso la cruna.
La molla della stoffa era troppo poco smorzata: due secondi dopo il taglio la striscia si arricciava ancora. Ora la molla è morbida quando si stringe e dura quando si allunga, con più attrito: si riapre e si ferma con un piccolo strappo.
La toppa si ingrandisce in hover con una transizione su transform, e durante l’arricciatura lo script la schiaccia a ogni fotogramma: la transizione inseguiva lo schiacciamento in ritardo. Lo schiacciamento ora va sulla proprietà scale, che è separata.
La scritta dei pulsanti si allarga in hover sull’asse wdth, e allargandosi spingeva via l’altro pulsante. Ora ogni pulsante tiene la larghezza della scritta a riposo, misurata a wdth 100, e la scritta si allarga nel padding; il taglio per le parole che rotolano è un clip-path solo sopra e sotto.
Il fondo dei pulsanti, in posizione assoluta, copriva solo la scritta e non il padding: in una griglia un figlio posizionato con grid-area prende come riferimento la sua cella. Il fondo ora resta fuori dalla griglia.
Ridimensionando a metà animazione, progress(1) chiudeva la mossa e faceva partire quella in coda, il cui riferimento andava subito perso. Ora la coda si svuota prima di chiudere.

Librerie

GSAP 3.15.0, Encode Sans (font variabile) 5.3.0.

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

Collaudo

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