Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il tangram che si ricompone
Nello stile minimal: i sette pezzi di un tangram, disegnati con una linea sottile, scivolano su curve, girano e atterrano in una figura vera (un gatto, una casa, una barca, il quadrato). Quando sono tutti giù si riempiono uno alla volta, il quadratino arancio per ultimo con un quarto di giro, e sotto compare il nome. Un clic passa alla figura dopo.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The rearranging tangram</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" data-stage>
<!-- seven thin pieces cut from one square: they glide, turn and land into a figure, fill in one at a time and the
figure gets its name; then they lift off again for the next one. A click or a tap moves on to the next figure. -->
<svg class="board" viewBox="-4 -7.45 8 7.95" role="img" aria-label="Tangram" data-board>
<line class="floor" x1="-4" y1="0" x2="4" y2="0" data-floor />
<g data-pieces></g>
</svg>
<p class="name" aria-live="polite"><span class="name__clip" data-name></span></p>
</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.
16 valori da cambiare
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 tangram che si ricompone» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo una riga grigia sottilissima si apre dal centro: è il pavimento. Sopra si disegnano da sole, una dopo l’altra, le linee dei sette pezzi di un tangram, chiusi nel loro quadrato; appena finite i pezzi si allontanano appena dal centro, come per dire che sono staccati, e tornano al loro posto con una molla. Poi si riempiono di nero uno alla volta, prima i grandi, e per ultimo il quadratino arancio, che fa un quarto di giro e scatta al suo posto mentre sotto sale il nome, Square, con le lettere che arrivano larghe e si stringono atterrando. Dopo una pausa l’inchiostro si ritira verso il centro di ogni pezzo, i pezzi tornano linee, si sollevano (crescono appena, come presi in mano) e partono uno dopo l’altro su traiettorie curve, girando su sé stessi: ogni pezzo prima di girare si carica un poco all’indietro, arriva un pelo oltre il suo posto e torna indietro, e scendendo si schiaccia come premuto sul tavolo. Quando sono giù tutti e sette nasce la figura nuova, un gatto seduto con le orecchie a punta e la coda alzata, e di nuovo i pezzi si riempiono uno alla volta, il quadratino (qui la testa del gatto) con il suo quarto di giro, e compare Cat. Poi la casa, dove il quadratino è la finestra, la barca, dove è un oblò, e di nuovo il quadrato. Ogni figura è un tangram vero: i sette pezzi, niente buchi e niente sovrapposizioni. I due triangoli grandi e i due piccoli sono gemelli e ognuno va al posto più vicino, così nessuno fa giri inutili. Un clic (o un tocco) passa subito alla figura dopo, anche a metà di un volo: i pezzi ripartono da dove sono. Col mouse, passando sopra un pezzo fermo, questo si alza di un capello e ricade su una molla.
Come funziona
Sette pezzi, una misura
Il tangram è un quadrato di quattro unità tagliato in sette pezzi: due triangoli grandi, uno medio, due piccoli, un quadratino e un parallelogramma. Ogni pezzo è un poligono SVG disegnato intorno al suo baricentro, così girarlo vuol dire solo cambiare l’angolo. Il viewBox è in unità del tangram e il pavimento è la riga y = 0: tutte le figure ci stanno appoggiate sopra, centrate in larghezza. Lo spessore delle linee si ricalcola a ogni ridimensionamento perché resti STROKE pixel su ogni schermo.
Figure vere, scritte come dati
Ogni figura è un elenco: per ogni pezzo il centro (x, y) e la rotazione in gradi. Il quadrato e il gatto stanno sulla griglia dritta, la casa e la barca su quella in diagonale (le misure in multipli di radice di due): le soluzioni sono state cercate e controllate con un piccolo programma che prova a coprire la sagoma con i sette pezzi, quarto di quadretto per quarto di quadretto, senza buchi né sovrapposizioni. Il quadratino ha simmetria di 90 gradi e i triangoli sono gemelli: a ogni passaggio si sceglie l’angolo equivalente più vicino e, fra due gemelli, lo scambio che fa viaggiare meno.
Il volo
Ogni pezzo è un oggetto con x, y, rotazione, scala, quanto è riempito e quanto è alzato; una timeline sola lo muove e a ogni fotogramma scrive l’attributo transform. La traiettoria è una curva di Bézier quadratica, col punto di controllo spostato di lato (verso l’alto quando si può) di ARC volte la distanza. Il tempo lungo la curva ha un’easing scritta a mano: power3.inOut più una piccola gobba sinusoidale nell’ultimo quarto, così il pezzo arriva un pelo oltre il suo posto e torna indietro. La rotazione usa back.inOut, che prima carica all’indietro e alla fine sfora un poco; la scala sale di LIFT al decollo e scende con back.out, che la porta un attimo sotto 1.
Linee, poi inchiostro
Ogni pezzo ha due poligoni uguali: la linea (con pathLength 1, così all’inizio si disegna da sola con stroke-dashoffset) e il pieno. Il pieno cresce dal baricentro con back.out e un contorno sottile color pagina, che lascia vedere le giunture fra i pezzi. Si riempie solo quando tutti e sette sono atterrati, nell’ordine del volo, e il quadratino arancio chiude con un quarto di giro e un elastico sulla scala. Al passaggio dopo il pieno si ritira verso il centro prima del decollo.
Il nome e i clic
Il nome sta in una finestra con overflow nascosto, una lettera per span: le lettere salgono da sotto con l’asse wdth di Archivo a 125 e atterrano a 100 con expo.out, così la parola si stringe mentre arriva; uscendo si stringono fino a 62 e scappano in alto, dall’ultima alla prima. Il giro va da solo con un delayedCall di HOLD secondi. Un clic uccide la timeline in corso e ne costruisce una nuova partendo dai valori in cui si trovano i pezzi, quindi si può cliccare in qualunque momento senza scatti.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAMES | script.js | { square: 'Square', cat: 'Cat', house: 'House', boat: 'Boat' } | Le figure, nell’ordine in cui arrivano, e il nome scritto sotto ognuna. Le figure sono square, cat, house e boat: si possono togliere, rimettere in un altro ordine e rinominare. |
HOLD | script.js | 2.4 | Quanti secondi una figura finita resta ferma prima che i pezzi ripartano. |
MOVE | script.js | 1.15 | Quanti secondi impiega un pezzo a volare al suo posto nuovo. |
STAGGER | script.js | 0.07 | I secondi fra la partenza di un pezzo e quella del successivo: 0 li fa partire tutti insieme. |
ARC | script.js | 0.22 | Quanto sono curve le traiettorie: 0 è una linea dritta, 0.5 un arco alto. |
LIFT | script.js | 0.07 | Quanto cresce un pezzo mentre è sollevato, come se fosse preso in mano. |
STROKE | script.js | 1.25 | Lo spessore delle linee, in pixel, uguale su ogni schermo. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se le figure si seguono da sole; con false si passa alla figura dopo solo con un clic. |
Quando usarla
Dove serve un gesto calmo e intelligente: la pagina di uno studio di design o di architettura, di una scuola, di un negozio di giochi di legno o di un marchio che vive di forme semplici; un caricamento elegante, una pagina 404, la sezione che spiega come un prodotto si adatta a usi diversi (gli stessi pezzi, figure diverse).
Sul telefono
La stessa animazione con le misure adattate: le figure prendono quasi tutta la larghezza, le linee restano sottili in pixel, il nome si rimpicciolisce. Un tocco passa alla figura dopo; il sollevamento sotto il puntatore c’è solo col mouse.
Con il movimento ridotto
Niente vola e niente gira: il quadrato compare già pieno in dissolvenza, e a ogni cambio la figura sfuma via e quella nuova sfuma dentro, già composta e riempita, con il nome che cambia in dissolvenza.
Trappole
- Trovare figure di tangram vere a mano è facile solo a parole: una casa con il tetto largo quattro e il corpo quattro per tre non si può fare con questi sette pezzi. Le sagome sono state provate con un piccolo programma che le copre quarto di quadretto per quarto di quadretto; quelle senza soluzione sono state scartate.
- Riempire un pezzo mentre gli altri volano ancora era un errore: un contorno nero che passa sopra un pezzo nero sparisce. Il pieno parte solo quando sono atterrati tutti e sette.
- Il quadratino ruota di un quarto di giro a ogni figura: se l’angolo di arrivo si calcolasse sul giro intero, al passaggio dopo farebbe un giro e mezzo per tornare. Per lui l’angolo equivalente più vicino si cerca ogni 90 gradi, per i triangoli ogni 360.
- Un clic a metà volo non deve far saltare niente: la timeline vecchia si uccide e quella nuova legge i valori dove sono, compresa la curva, che parte dalla posizione di quel momento.
- Il video della scheda si ferma quando l’immagine torna uguale: tutte le scelte (curve verso l’alto, lato alternato, gemelli) sono deterministiche, così dopo un giro intero il passaggio dal quadrato al gatto è identico al primo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
