Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
Il rombo che diventa cerchio
Un pulsante a rombo, «[ Let’s talk ]», sta su una linea tratteggiata e segue il mouse: andando avanti gira di 90 gradi a ogni passo e prende lati, sei, otto, dodici, sedici, finché diventa un cerchio. Ogni forma che si lascia dietro resta per un attimo come contorno vuoto che svanisce. Al telefono si trascina col dito.
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 diamond that becomes a circle</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5.3.0/500.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the booking corner of a small pottery school: a lump of clay with a corner at each side sits on a dashed line.
Move the pointer along the line and the lump follows, turning a quarter at each step and taking more sides
(six, eight, twelve, sixteen) until it runs round. Every shape it leaves behind stays as an outline for a moment. -->
<main class="pagina" data-pagina>
<header class="barra" data-entra>
<a class="marchio" href="#">
<svg class="marchio__segno" viewBox="0 0 40 40" aria-hidden="true" focusable="false">
<path d="M20 3 L37 20 L20 37 L3 20 Z"/>
<circle cx="20" cy="20" r="8.5"/>
</svg>
<span class="marchio__nome">Kiln & Wheel</span>
<span class="marchio__sotto">Pottery school</span>
</a>
<p class="barra__orari">Thursdays, 7 to 9 pm</p>
</header>
<section class="invito" aria-labelledby="titolo">
<p class="invito__occhiello" data-entra>Evening wheel course</p>
<h1 class="invito__titolo" id="titolo">
<span class="riga" data-entra>Every bowl starts</span>
<span class="riga" data-entra>out <em>all corners.</em></span>
</h1>
<p class="invito__testo" data-entra>Bring an apron and nothing else. Over six evenings you wedge, centre, open and pull a lump of clay until it runs round, and we fire it twice for you.</p>
</section>
<section class="banco" aria-label="Book a wheel session">
<!-- the dashed line runs across the whole page; the clay travels only along the middle part -->
<div class="linea" data-linea aria-hidden="true"></div>
<div class="binario" data-binario>
<div class="tacche" data-tacche aria-hidden="true"></div>
<div class="scie" data-scie aria-hidden="true"></div>
<a class="pezzo" href="#book" data-pezzo aria-describedby="aiuto">
<span class="pezzo__molla" data-molla>
<svg class="pezzo__forma" data-forma viewBox="0 0 220 220" aria-hidden="true" focusable="false">
<path class="pezzo__argilla" data-argilla d="M210 110 L110 210 L10 110 L110 10 Z"/>
</svg>
<span class="pezzo__scritta">
<span class="parentesi parentesi--a" aria-hidden="true">[</span>
<span class="pezzo__parole">Let’s talk</span>
<span class="parentesi parentesi--b" aria-hidden="true">]</span>
</span>
</span>
<span class="pezzo__fase" aria-hidden="true"><span class="pezzo__finestra"><span class="pezzo__fase-testo" data-fase></span></span></span>
</a>
</div>
<p class="banco__aiuto" id="aiuto" data-aiuto data-entra>Move along the line to throw the pot</p>
</section>
<footer class="piede" data-entra>
<p>Eight wheels, clay and two firings included</p>
<p>Book a wheel, we write back the same day</p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.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.
38 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 rombo che diventa cerchio» da Animorio e adattala al mio sitoCosa fa
L’angolo delle prenotazioni di una scuola di ceramica inventata, Kiln & Wheel: il corso serale al tornio, il titolo «Every bowl starts out all corners» e sotto una linea tratteggiata che attraversa tutta la pagina. Sulla linea c’è un blocco d’argilla color terracotta, un rombo appoggiato su una punta, con scritto «[ Let’s talk ]». Muovendo il mouse da sinistra a destra il blocco lo segue lungo la linea e intanto si tornisce: gira di un quarto di giro e diventa esagono, poi ottagono, dodecagono, un poligono di sedici lati e alla fine un cerchio. Ogni forma superata resta indietro come un contorno sottile che svanisce: andando piano se ne vede una alla volta, con una passata veloce resta dietro tutta una fila, e dura di più. Tirato in fretta il blocco si inclina come argilla morbida e si raddrizza con un piccolo rimbalzo; sotto la linea delle tacche segnano le tappe e sotto il blocco una parola dice a che punto è il pezzo, da «A lump of clay» a «A round bowl». Tornando indietro il cerchio rifà gli angoli. Un clic schiaccia il blocco e risponde «See you at the wheel».
Come funziona
Le forme
Ogni forma è un tracciato SVG nello stesso quadrato di 220, centrato a 110 con raggio 100, scritto dallo script: un poligono con il numero di lati di SIDES e un vertice che punta a destra, così il primo, con 4 lati, è un rombo in piedi su una punta. Lo 0 è il cerchio, fatto di quattro archi.
Il viaggio in una timeline
Una timeline in pausa contiene tutto il percorso: da ogni forma alla successiva un tween di MorphSVG con type rotational, lungo uguale per tutte e in linea retta, che gira anche di TURN gradi. Ogni tween è un fromTo che dice anche da quale forma parte (con immediateRender: false, se no le partenze si disegnerebbero tutte subito).
Il mouse dà un numero
La posizione orizzontale del mouse, ovunque nella pagina, diventa un numero da 0 a 1 lungo la parte utile della linea. Un tween di FOLLOW secondi ci porta un oggetto, e a ogni fotogramma quel numero sposta il blocco sulla linea e manda la timeline allo stesso punto con progress: posizione e forma sono la stessa cosa.
I contorni lasciati indietro
Fra un fotogramma e l’altro lo script guarda se il numero ha superato una tappa, di un millesimo. Se sì, nasce un SVG col solo contorno di quella forma, girato come lei e fermo al suo posto, che svanisce in TRAIL_BASE più TRAIL_STEP secondi per ogni contorno ancora presente: più si corre, più ne restano e più durano.
L’argilla morbida, il dito, la tastiera
La velocità del blocco lo inclina (skewX) e lo allarga appena, con quickTo e una curva elastica che lo raddrizza quando si ferma. Al telefono si trascina il blocco col dito, o si tocca la linea per mandarlo lì; con la tastiera le frecce lo portano da una forma all’altra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIDES | script.js | [4, 6, 8, 12, 16, 0] | Le forme lungo la linea, per numero di lati: 4 è il rombo, 0 il cerchio (come nel sito). |
STAGES | script.js | ['A lump of clay', 'Wedged', 'Centred', 'Opened up', 'Walls pulled', 'A round bowl'] | La parola sotto il blocco per ogni forma, nello stesso ordine. |
TURN | script.js | 90 | I gradi di cui il blocco gira da una forma alla successiva (nel sito 90). |
SIZE | script.js | 220 | Il lato del blocco in pixel al computer; al telefono si stringe da solo. |
FOLLOW | script.js | 0.2 | I secondi che il blocco impiega a raggiungere il mouse (nel sito 0,1). |
TRAIL_BASE | script.js | 0.3 | I secondi in cui svanisce un contorno lasciato indietro (nel sito 0,3). |
TRAIL_STEP | script.js | 0.4 | I secondi aggiunti per ogni contorno ancora sulla linea (nel sito 0,4). |
STRETCH | script.js | 0.6 | Quanto si inclina il blocco tirato in fretta (0 lo tiene dritto). |
Quando usarla
Per il pulsante principale in fondo a una pagina, quello del contatto o della prenotazione: invece di aspettare un clic, gioca con chi passa e racconta l’idea del marchio (qui il pezzo che si tornisce). Va bene dove c’è spazio in larghezza, una sezione intera tutta per lui.
Sul telefono
Le stesse sei forme con un blocco più piccolo: si trascina col dito lungo la linea, oppure si tocca la linea e il blocco ci arriva; un tocco senza trascinare è il clic.
Con il movimento ridotto
Il blocco non viaggia e non gira, e non lascia contorni: svanisce e ricompare già con la forma più vicina al mouse, ferma sulla sua tacca.
Trappole
- In una timeline di morph guidata con progress, un semplice to() non basta: MorphSVG prende come partenza la forma che trova sul tracciato la prima volta, cioè il rombo, e ogni tappa ripartirebbe dal rombo (alla tappa dell’esagono si vedrebbe di nuovo il rombo). Ogni tween va scritto come fromTo, con la forma di partenza e immediateRender: false.
- Il passaggio di tappa si controlla fra il valore del fotogramma prima e quello di adesso, non guardando se il numero è uguale alla tappa: col mouse veloce si salta da 0,1 a 0,7 in un colpo e le tappe in mezzo vanno lasciate indietro tutte.
- Al telefono il mouse finto dell’anteprima e il dito vanno tenuti separati: il blocco segue i movimenti del mouse ovunque, ma col dito si muove solo trascinandolo, se no ogni scorrimento della pagina lo porterebbe via.
- La scritta sotto il blocco va centrata con un contenitore largo e text-align, non con translateX(-50%) nel CSS: il transform che GSAP scrive in linea per farla entrare cancellerebbe quello della classe.
Librerie
GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, Instrument Serif 5.3.0, Onest (font variabile) 5.3.0, DM Mono 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP + MorphSVG 37 KB.
Collaudo
Provata il 13 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.
