La formazione a incastro

Etichette, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 14 KBGSAP 28 KBGratisScarica lo zip

Un campo per scegliere più strumenti nell’annuncio di una band, dove ogni strumento scelto è un pezzo di puzzle: l’evidenziazione della riga diventa il pezzo, che viene sollevato, portato nel campo e abbassato al suo posto, con l’incastro che si chiude sulla linguetta del pezzo prima. Tolto, il pezzo si stacca e gli altri scivolano a incastrarsi di nuovo; a formazione piena la striscia si chiude.

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 interlocking line-up</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gabarito@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the players a band is looking for, in its ad: every instrument chosen is a jigsaw piece. The highlight of the
         row chosen in the list becomes the piece, which is lifted, carried up and lowered into the field, where its
         socket closes over the tab of the piece before. The pieces are made by the script -->
    <div class="band" data-band data-autoclic>
      <label class="band__label" id="band-label" for="band-input">Who’s missing from the band?</label>
      <div class="band__box">
        <div class="band__field" data-field>
          <ul class="strip" role="list" aria-label="Players the band is looking for" data-strip></ul>
          <input class="band__input" id="band-input" type="text" role="combobox" aria-expanded="false" aria-controls="band-options" aria-autocomplete="list" aria-describedby="band-hint" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="done" placeholder="Search instruments" data-input>
        </div>
        <div class="pop" hidden data-pop>
          <p class="pop__note" hidden data-note></p>
          <ul class="pop__list" id="band-options" role="listbox" aria-label="Instruments" data-options></ul>
        </div>
      </div>
      <p class="band__hint" id="band-hint" data-hint></p>
      <p class="sr" aria-live="polite" data-live></p>
    </div>
  </main>

  <!-- the soft shadow under a piece held up in the air -->
  <svg class="defs" aria-hidden="true" width="0" height="0" focusable="false">
    <filter id="piece-soft" x="-30%" y="-80%" width="160%" height="260%">
      <feGaussianBlur stdDeviation="4"/>
    </filter>
  </svg>

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

67 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 «La formazione a incastro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la domanda Who’s missing from the band?, un campo bianco con dentro due pezzi di puzzle incastrati, Drums color corallo e Lead guitar giallo, ognuno con la sua crocetta, e la linguetta di Lead guitar che sporge verso la casella Search instruments; sotto, Room for two more players. Toccando il campo o scrivendo si apre l’elenco degli strumenti, con la parte scritta in grassetto e a destra la sezione della band (Rhythm, Strings, Keys, Vocals, Horns & winds); la riga accesa prende la tinta tenue della sua sezione. Scelta una riga, la sua evidenziazione diventa il pezzo: si stringe intorno al nome, prende il colore pieno, la linguetta e l’incastro, si solleva con un’ombra morbida, sale nel campo e viene abbassata al suo posto, dove l’incastro si chiude sulla linguetta del pezzo prima e gli angoli che si toccano diventano dritti come in una striscia sola, con un piccolo scatto. La casella fa posto e il campo, se serve, si allunga di una riga: la striscia va a capo come una parola spezzata, con la linguetta in fondo a una riga e l’incastro all’inizio della dopo. Con quattro pezzi la linguetta dell’ultimo rientra e la striscia si chiude; la casella dice Line-up full, e uno strumento scelto lo stesso vola fino in fondo, sbatte contro la fine chiusa, trema e cade, mentre la riga sotto dice in rosso An ad can list up to four players. Un pezzo toccato si solleva e sparisce, e quelli dopo scivolano indietro a incastrarsi; uno che cambia riga viene preso e posato. Nel campo vuoto il primo tasto indietro solleva e contorna l’ultimo pezzo, il secondo lo toglie; un nome che c’è già fa traballare il suo pezzo.

Come funziona

Un combobox vero

La casella è un input con role combobox, aria-expanded, aria-controls e aria-activedescendant sulla riga accesa; l’elenco è una listbox di option, mosso con le frecce, Invio sceglie ed Esc chiude. I pezzi sono un elenco di pulsanti con aria-label Remove e il nome, e una regione aria-live dice che cosa si è aggiunto o tolto e quanto posto resta.

Il pezzo in un solo tracciato

Ogni pezzo è un path SVG ridisegnato dallo script: gli angoli, la linguetta classica a destra (sei curve di Bézier, diciannove punti: il collo stretto e la testa tonda) e a sinistra l’incastro, che è la stessa curva percorsa al contrario. Due numeri da 0 a 1, knob e sock, fanno crescere linguetta e incastro da un punto alla misura piena (KNOB pixel); gli angoli sono dritti dove due pezzi si toccano sulla stessa riga e tondi alle due fini della striscia.

Dalla riga al pezzo

Scelta una riga, si misurano la riga e il suo nome (con un Range): il pezzo nasce allineato al nome e il suo contorno parte grande come la riga, poi si stringe intorno al nome mentre il colore passa dalla tinta tenue a quella piena e la linguetta cresce. Intanto il pezzo si solleva (scala LIFT e un’ombra sfocata con feGaussianBlur), segue una curva quadratica fino al suo posto, riletto a ogni fotogramma dal flusso, e viene abbassato: uno schiacciamento elastico e il vicino che cede un poco fanno lo scatto.

Gli altri fanno posto

Prima di ogni cambio si misurano le posizioni di pezzi e casella, dopo li si fa scivolare dal vecchio posto al nuovo (FLIP fatto a mano); un pezzo che cambia riga viene sollevato e posato, la casella che cambia riga riappare in dissolvenza, e il campo cresce o cala con un tween dell’altezza. Un pezzo tolto esce dal flusso dove si trova, si solleva e sparisce.

Pieno, tasti e anteprima

Con MAX pezzi la linguetta dell’ultimo rientra e la striscia si chiude; uno strumento in più fa lo stesso volo fino in fondo, sbatte, trema e cade, e la riga sotto il campo lo dice in rosso. Il tasto indietro nel campo vuoto solleva e contorna l’ultimo pezzo, il secondo lo toglie; freccia a sinistra porta sui pezzi, Canc li toglie. Un clic da script (detail 0, l’anteprima della libreria) scrive e sceglie, riempie la formazione, prova un quinto strumento e toglie due pezzi, senza prendere il fuoco.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MAX`	script.js	`4`	Quanti musicisti può cercare un annuncio.
`START`	script.js	`['Drums', 'Lead guitar']`	I musicisti nell’annuncio quando si apre la pagina.
`INSTRUMENTS`	script.js	`[['Drums', 'rhythm'], ['Bass guitar', 'rhythm'], …]`	Gli strumenti che si possono scegliere, ognuno con la sua sezione: rhythm, strings, keys, voice o winds (dà il colore del pezzo).
`KNOB`	script.js	`14`	Quanto entra, in pixel, la linguetta di un pezzo in quello dopo (0: pezzi senza incastro).
`LIFT`	script.js	`1.1`	Quanto si ingrandisce un pezzo mentre è sollevato.
`FLIGHT`	script.js	`0.5`	I secondi che un pezzo impiega dall’elenco al suo posto.

Provali nel Playground

Quando usarla

Per scegliere più voci da un elenco: gli strumenti o i ruoli che cerca una band o una squadra, le competenze di un profilo, gli ingredienti da escludere in un’app di ricette, le lingue parlate da una guida, i filtri di una ricerca. Il puzzle dice che le voci scelte stanno insieme.

Sul telefono

Il campo prende la larghezza dello schermo e i pezzi vanno a capo, con la striscia che continua da una riga all’altra; un tocco sul campo apre l’elenco. I pezzi sono alti 44 pixel e si toccano su 48, le righe dell’elenco sono alte 44, la casella è a 16 pixel, così Safari su iPhone non ingrandisce la pagina, e correzione e maiuscole automatiche sono spente.

Con il movimento ridotto

I pezzi compaiono e spariscono al loro posto in dissolvenza, linguette, incastri e angoli prendono subito la loro forma, niente vola, si solleva o trema e gli altri si spostano senza scivolare; l’elenco si apre e si chiude in dissolvenza. La riga sotto il campo dice comunque che cosa succede, e il tasto indietro contorna l’ultimo pezzo prima di toglierlo.

Trappole

La linguetta di un pezzo sta dentro il pezzo dopo: si vede perché l’incastro del pezzo dopo è un buco nel suo contorno fatto con la stessa curva al contrario. Se le due curve non hanno esattamente gli stessi punti e la stessa misura, fra i due pezzi resta una fessura o una sovrapposizione.
Mentre un pezzo vola gli altri possono spostarsi (un pezzo tolto, il campo più stretto): la meta del volo non si fissa alla partenza ma si rilegge a ogni fotogramma dal flusso (offsetLeft, offsetTop), e la trasformazione è la differenza.
Un pezzo che cambia riga, fatto scivolare in diagonale, passava sopra le parole degli altri: ora viene sollevato e posato, più grande e con l’ombra, così si legge che passa sopra. La casella che cambia riga invece riappare in dissolvenza, dopo che il pezzo in volo è passato.
Due tween sullo stesso valore (il pezzo sollevato dal primo tasto indietro e riabbassato) senza overwrite si contendono il valore e vince quello che finisce dopo: il pezzo restava sollevato. Ora hanno overwrite auto.
Una delayedCall già finita, chiamata con progress(1), rifaceva la sua chiamata: l’anteprima chiude il passo precedente solo se è ancora in corso (isActive).
Scegliendo col puntatore la casella perderebbe il fuoco prima del clic: il pointerdown sull’elenco si ferma (preventDefault). Una casella sotto i 16 pixel fa ingrandire la pagina in Safari su iPhone.

Librerie

GSAP 3.15.0, Gabarito (font variabile) 5.3.0.

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

Collaudo

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