Il carillon

SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Un carillon aperto visto da vicino: il cilindro con le punte pizzica i denti del pettine, la ballerina piroetta davanti allo specchio e salgono le note. Quando la molla si scarica rallenta e si ferma, poi una mano gira la manovella e lo ricarica. Un clic lo ricarica subito.

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>Il carillon</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="banco" data-banco>
    <header class="testo">
      <p class="marchio">Wren &amp; Willow</p>
      <h1 class="titolo">A little tune,<br>kept in a box.</h1>
      <p class="frase">Music boxes tuned by hand in our gift shop on Mill Lane. Wind the key and it plays for you.</p>
      <button class="carica" type="button" data-carica>
        <span class="carica__fondo" aria-hidden="true"></span>
        <svg class="carica__chiave" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="2.6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 9.4V3.6M8.6 3.6h6.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /><path d="M12 14.6v5.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /><circle cx="12" cy="20.4" r="1.6" fill="currentColor" /></svg>
        <span class="carica__scritta">Wind it up</span>
      </button>
    </header>

    <div class="palco" data-palco>
      <svg class="scena" data-scena viewBox="0 0 900 820" preserveAspectRatio="xMidYMid meet" role="img" aria-label="An open music box: the pinned cylinder turns and plucks the comb, a dancer spins in front of the mirror, notes float up. Click to wind it.">
        <defs>
          <linearGradient id="g-cilindro" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" style="stop-color: var(--ottone-scuro)" />
            <stop offset="0.32" style="stop-color: var(--ottone-chiaro)" />
            <stop offset="0.62" style="stop-color: var(--ottone)" />
            <stop offset="1" style="stop-color: var(--ottone-scuro)" />
          </linearGradient>
          <linearGradient id="g-specchio" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" style="stop-color: var(--specchio-chiaro)" />
            <stop offset="1" style="stop-color: var(--specchio)" />
          </linearGradient>
          <linearGradient id="g-fronte" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" style="stop-color: var(--legno)" />
            <stop offset="1" style="stop-color: var(--legno-scuro)" />
          </linearGradient>
          <linearGradient id="g-velluto" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" style="stop-color: var(--velluto-scuro)" />
            <stop offset="1" style="stop-color: var(--velluto)" />
          </linearGradient>
          <clipPath id="c-specchio"><ellipse cx="486" cy="236" rx="114" ry="82" /></clipPath>
          <clipPath id="c-vassoio"><polygon points="196,510 704,510 672,394 228,394" /></clipPath>
        </defs>

        <ellipse class="ombra" cx="458" cy="752" rx="340" ry="22" />

        <g class="scatola" data-scatola>
          <!-- il coperchio aperto, visto dal davanti: il velluto, lo specchio e il riflesso della ballerina -->
          <g data-coperchio>
            <polygon class="legno" points="210,384 690,384 676,112 224,112" />
            <polygon fill="url(#g-velluto)" points="228,376 672,376 661,128 239,128" />
            <path class="cucito" d="M246 366L253 140H647L654 366Z" />
            <ellipse class="cornice" cx="486" cy="236" rx="120" ry="88" />
            <ellipse fill="url(#g-specchio)" cx="486" cy="236" rx="114" ry="82" />
            <g clip-path="url(#c-specchio)">
              <g class="riflesso" data-riflesso transform="translate(540 356) scale(-0.92 0.92)"></g>
              <path class="luce-specchio" d="M380 330L470 140H500L410 330ZM430 330L520 140H534L444 330Z" />
            </g>
          </g>

          <!-- il piano della scatola e il vassoio col meccanismo, sotto un vetro -->
          <polygon class="legno-alto" points="168,522 732,522 692,382 208,382" />
          <polygon class="vassoio" points="196,510 704,510 672,394 228,394" />
          <g clip-path="url(#c-vassoio)">
            <rect class="piastra" x="234" y="404" width="440" height="100" rx="6" />
            <!-- la molla nel suo tamburo -->
            <g transform="translate(254 452) scale(1 0.8)">
              <g data-tamburo>
                <circle class="dentatura" r="31" />
                <circle class="tamburo" r="26" />
              </g>
              <path class="molla" data-molla d="" />
              <circle class="ottone" r="5" />
            </g>
            <g data-rinvio>
              <circle class="dentatura dentatura--piccola" cx="0" cy="0" r="9" transform="translate(284 432)" />
            </g>
            <!-- il cilindro con le punte -->
            <line class="asse" x1="286" y1="432" x2="622" y2="432" />
            <rect x="300" y="414" width="310" height="36" rx="3" fill="url(#g-cilindro)" />
            <rect class="ottone-scuro" x="294" y="412" width="8" height="40" rx="2" />
            <rect class="ottone-scuro" x="608" y="412" width="8" height="40" rx="2" />
            <g data-punte></g>
            <!-- il pettine: i denti nascono sulla piastra e arrivano sotto il cilindro -->
            <polygon class="pettine" points="296,488 614,472 614,504 296,504" />
            <g data-denti></g>
            <circle class="vite" cx="318" cy="496" r="3.4" />
            <circle class="vite" cx="592" cy="486" r="3.4" />
            <!-- il regolatore: la ventola frena la corsa -->
            <rect class="staffa" x="630" y="418" width="40" height="52" rx="4" />
            <line class="asse" x1="650" y1="414" x2="650" y2="474" />
            <rect class="ventola" data-ventola x="638" y="434" width="24" height="12" rx="2" />
            <rect class="vetro" x="196" y="394" width="508" height="116" />
          </g>
          <path class="bordo-vassoio" d="M196 510H704L672 394H228Z" />

          <!-- la ballerina sul suo perno, davanti allo specchio -->
          <g class="perno" data-ballerina transform="translate(410 400) scale(1.22)"></g>

          <!-- il coperchio chiuso, che si alza all'apertura -->
          <g data-chiuso>
            <polygon class="legno-alto" points="166,524 734,524 694,380 206,380" />
            <path class="intarsio" d="M214 510H686L660 394H240Z" />
          </g>

          <!-- il fronte -->
          <rect class="cornicione" x="160" y="512" width="580" height="16" rx="4" />
          <rect x="170" y="526" width="560" height="200" fill="url(#g-fronte)" />
          <path class="venatura" d="M184 560C300 552 420 572 560 556S700 566 716 560M184 640C320 630 400 652 540 636S690 646 716 642M184 698C300 690 460 708 600 694" />
          <rect class="intarsio" x="200" y="550" width="500" height="150" rx="4" />
          <rect class="ottone" x="350" y="602" width="200" height="42" rx="7" />
          <rect class="incisione" x="357" y="608" width="186" height="30" rx="4" />
          <text class="targa" x="450" y="628">WREN &amp; WILLOW</text>
          <rect class="zoccolo" x="152" y="720" width="596" height="26" rx="5" />
          <!-- la manovella sul fianco destro -->
          <rect class="ottone-scuro" x="726" y="609" width="40" height="12" rx="3" />
          <g data-manovella>
            <circle class="ottone" cx="770" cy="615" r="15" />
            <rect class="ottone" x="764" y="609" width="56" height="12" rx="6" />
          </g>
          <circle class="ottone-scuro" cx="770" cy="615" r="5" />
          <circle class="pomello" data-pomello cx="814" cy="615" r="11" />
        </g>

        <g data-note></g>

        <!-- la mano che ricarica -->
        <g class="mano" data-mano transform="translate(1300 600)">
          <rect class="manica" x="36" y="-21" width="420" height="42" rx="10" />
          <rect class="polsino" x="28" y="-24" width="18" height="48" rx="6" />
          <path class="guanto" d="M34 -16C18 -22 0 -22 -10 -14C-18 -8 -18 8 -10 14C0 22 18 22 34 16Z" />
          <path class="guanto-segno" d="M-5 -9C-1 -5 -1 5 -5 9M4 -12C8 -6 8 6 4 12" />
          <path class="guanto" d="M22 -15C14 -30 -2 -31 -7 -23C-3 -19 10 -17 16 -10Z" />
        </g>
      </svg>
    </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.

37 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 carillon» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

All’apertura il coperchio chiuso si alza, si gira e mostra il velluto con lo specchio ovale; la ballerina, una sagoma senza faccia col tutù rosa, sale sul suo perno con un elastico. Sotto il vetro c’è il meccanismo: il tamburo con la molla a spirale, il cilindro d’ottone con le punte, il pettine d’acciaio con quindici denti e il regolatore con la ventola. Il cilindro gira: ogni punta che arriva al pettine solleva un dente, lo lascia andare e il dente vibra; da lì sale una nota disegnata (croma, semiminima o due crome legate) che ondeggia e svanisce, color crema, rosa o celeste secondo quanto è acuta. La ballerina piroetta, e nello specchio il suo riflesso la mostra di spalle. La manovella sul fianco torna indietro piano mentre la molla si allarga. Poi la musica rallenta, le note si diradano e tutto si ferma; arriva una mano con la manica blu, prende il pomello, fa tre giri di manovella (la scatola sobbalza a ogni giro), la molla si stringe di nuovo e la musica riparte. Un clic sulla scatola o sul pulsante «Wind it up» la ricarica subito. Testi del negozio inventato Wren & Willow.

Come funziona

Tutto da un angolo solo

Lo stato del carillon sono tre numeri: G, i gradi fatti dal cilindro (crescono sempre), carica, i giri di molla rimasti, e mano, da 0 (fuori scena) a 1 (sul pomello). Una funzione disegna, chiamata dal ticker di GSAP a ogni fotogramma, ne ricava tutto il resto: le punte, i denti, la ventola, gli ingranaggi, la molla, la manovella, la mano e la ballerina.

Le punte e il pettine

La melodia è una stringa di numeri di dente: ogni passo diventa una o più punte sul cilindro, una ogni 360 / passi gradi. Il cilindro è visto dall’alto: una punta all’angolo φ è un trattino da r·sin φ a (r + 6)·sin φ, si vede solo quando cos φ è positivo, e così sembra un puntino al centro e una lineetta sui bordi. Fra 48° e 60° la punta solleva il suo dente; quando passa i 60° fra un fotogramma e l’altro il dente scatta: la sua ampiezza va da 1 a 0 in 1,3 s e la punta si sposta di ampiezza × sin(tempo × frequenza), con una frequenza diversa per ogni dente.

Rallentare senza fisica

La corsa è un solo tween da 0 a 1 di durata fissa con una curva fatta a mano, (t − t⁴/4) / 0,75: la sua velocità è 1 − t³, piena all’inizio e poi sempre più lenta fino a zero. Così il giro del video torna sempre uguale e il cilindro finisce un numero intero di giri, con le punte al loro posto. La ballerina gira di G × PIROETTE, la ventola di G × 12, il tamburo di G / GIRI: alla fine tutti tornano dove erano partiti.

La molla e la mano

La molla è una spirale di 110 punti col raggio 6 + 19·s^p: con p alto (carica) le spire si stringono al centro, con p basso si allargano contro il tamburo; il capo interno gira con la manovella, quello esterno col tamburo. La manovella sta a carica × 360 gradi: scaricandosi torna indietro, caricandosi gira avanti. La mano segue il pomello a ogni fotogramma, mescolando la sua posizione fuori scena con quella del pomello secondo mano.

La regia e il clic

Una timeline ripetuta all’infinito: la corsa, una pausa, la mano che arriva, tre giri di manovella con una curva che accelera e frena a ogni giro (e un sobbalzo elastico della scatola), la mano che se ne va. Il clic ferma la timeline, porta G dentro un giro intero come nuova base, fa girare alla mano solo i giri che mancano e poi riparte da capo: nessuna punta salta. La ballerina e il suo riflesso, ruotato di 180° e specchiato con scale(−0,92, 0,92), sono le stesse forme spostate a ogni fotogramma: il ginocchio del passé passa davanti o dietro la gamba ferma, le braccia si stringono di |cos| e la crocchia sparisce dietro la testa.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MELODIA`	script.js	`24 passi`	Un giro del cilindro: i denti pizzicati a ogni passo, da 0 (il più grave) a 14 (il più acuto); 3+10 è un accordo, - una pausa.
`DURATA_CORSA`	script.js	`11`	Secondi di musica per ogni carica, rallentando fino a fermarsi.
`GIRI`	script.js	`3`	Giri del cilindro a ogni carica, e giri di manovella che la mano fa per ricaricarlo.
`PIROETTE`	script.js	`2`	Piroette della ballerina per ogni giro del cilindro.
`--legno, --velluto, --ottone`	style.css	`#8C4A2C, #9B2E4E, #DDAE55`	La scatola, la fodera del coperchio e gli ottoni.

Provali nel Playground

Quando usarla

Per negozi di regali, giocattoli e oggetti d’epoca, liste nascita, biglietti d’auguri, pagine di Natale o di San Valentino: una scena che si guarda volentieri due volte e invita a toccarla.

Sul telefono

Il testo del negozio va sopra e la scatola sotto, più piccola ma uguale: stesso meccanismo, stesse note e stessa mano. Si ricarica toccando la scatola o il pulsante.

Con il movimento ridotto

Il carillon è già aperto e fermo, con la ballerina al suo posto e cinque note sospese che compaiono in dissolvenza; il clic le fa svanire e ne fa comparire altre cinque, senza niente che si sposti.

Trappole

Con la velocità integrata fotogramma per fotogramma il giro non torna mai uguale e il cilindro si ferma a un angolo qualsiasi: meglio un tween con una curva che dice dove arriva.
Il pizzico si cerca fra l’angolo di prima e quello di adesso, non con un uguale: a velocità piena una punta salta diversi gradi per fotogramma e non cade mai esattamente sulla riga.
Quando la timeline ricomincia G torna indietro di un giro intero: senza il controllo «avanti positivo» tutte le punte pizzicherebbero insieme.
Per scalare il coperchio dalla cerniera serve svgOrigin in coordinate del disegno: con transformOrigin il riquadro cambia mentre il riflesso entra e il coperchio si stacca.
Il riflesso è la stessa ballerina con scale(−1, 1) e mezzo giro in più: solo specchiata sarebbe vista di faccia anche nello specchio.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

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

Collaudo

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