Lo scheletro del museo al passaggio

Hover, SVGGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

L’intestazione di un museo di storia naturale inventato, nello stile ricco: nel salone, sotto il lucernario, il basamento del T-rex è vuoto. Passando col puntatore o toccando la sala le ossa arrivano volando dai lati, un gruppo alla volta, e si incastrano ognuna sulla sua vicina con uno scatto e uno sbuffo di polvere: le zampe, il bacino, la schiena, la coda, le costole, le braccine, il collo, il cranio e la mandibola. Finito, il tirannosauro apre le fauci e scuote la testa, poi respira e segue il puntatore con lo sguardo; «Rebuild» lo smonta e si ricomincia.

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 museum skeleton on hover</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up natural history museum, Strata. In the great hall the T-rex plinth is empty: moving across the hall
       (or tapping it) brings the bones flying in one by one, each snapping onto its neighbour with a puff of dust,
       until the whole skeleton stands, opens its jaws and shakes its head. Hall, plinth, rope and bones are SVG
       drawn by the script -->
  <main class="sala" data-sala>
    <svg class="fondo" data-fondo viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" aria-hidden="true"></svg>

    <header class="testata">
      <p class="marchio">
        <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M5 26h22M7 26V13M12 26V13M20 26V13M25 26V13M4 13h24L16 5Z"/></svg>
        Strata
      </p>
      <p class="sotto">Museum of Natural History</p>
    </header>

    <div class="testo">
      <h1 class="titolo">Rex is back <em>on its feet.</em></h1>
      <p class="riga">The great hall reopens with its T-rex, bone by bone. Open daily, nine to six.</p>
      <div class="azioni">
        <a class="pillola" href="#visit"><span>Plan your visit</span></a>
        <button class="rifai" type="button" data-rifai hidden>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.6-5.9M4 4v4.5h4.5"/></svg>
          <span>Rebuild</span>
        </button>
      </div>
    </div>

    <div class="rex">
      <svg class="rex__svg" data-rex viewBox="0 0 820 470" role="img" aria-labelledby="rex-nome">
        <title id="rex-nome">A Tyrannosaurus rex skeleton being put together on its plinth</title>
      </svg>
    </div>

    <p class="aiuto" data-aiuto>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1-6 6h-.5a6 6 0 0 1-4.8-2.4L4.6 15a1.5 1.5 0 0 1 2.3-1.9L8 14"/></svg>
      <span>Move across the hall to rebuild Rex</span>
      <span class="aiuto__conta" data-conta aria-live="polite"></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.

27 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 «Lo scheletro del museo al passaggio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un salone di museo disegnato in SVG: il soffitto a cassettoni col lucernario e il fascio di luce che scende, quattro colonne con capitello e base, due stendardi rossi con un’ammonite d’oro, due vetrine con un’ammonite e un pesce fossile, l’arco scuro di una porta in fondo e il pavimento di marmo lucido. In mezzo, sul basamento di pietra con la targa d’ottone e il cordone di velluto sui paletti, ci sono solo le due aste d’acciaio. Ogni tratto che il puntatore percorre nella sala (o ogni tocco) chiama il gruppo d’ossa seguente: arriva da un lato in arco, girando su sé stesso, e si posa con un piccolo eccesso e il rimbalzo, alza uno sbuffo di polvere e fa tremare appena lo scheletro. Senza nessuno davanti il museo monta Rex da solo. Quando l’ultima ossa, la mandibola, è al suo posto, le fauci si spalancano e la testa trema; poi le costole si alzano e si abbassano col respiro, la coda ondeggia e la testa guarda verso il puntatore. «Rebuild», o qualche secondo di calma, lo smonta: le ossa volano via ai lati e si riparte.

Come funziona

Lo scheletro è un’armatura

Ogni osso ha un padre, il punto del padre a cui è attaccato (una frazione della sua lunghezza e uno scarto di lato), un angolo e una lunghezza. A ogni fotogramma la funzione calcola() ricava da questi numeri la posizione e l’angolo di ogni osso, dal bacino verso le punte (cinematica diretta). Così nessun osso può staccarsi dal vicino: il respiro, il ruggito e lo sguardo cambiano solo gli angoli.

Le ossa disegnate

Ogni osso è una forma SVG disegnata lungo il suo asse, dal giunto alla punta: le ossa lunghe con le teste e il fusto stretto, le vertebre col corpo, la spina e, nella coda, lo chevron sotto, le costole curve, il bacino con l’ileo, il pube con lo stivale e l’ischio, il cranio con le finestre nell’osso e i denti, la mandibola. Una sfumatura dall’avorio chiaro all’ombra, il contorno bruno, una riga di luce e qualche crepa danno il volume.

Il volo e lo scatto

Il volo è uno scarto in più sopra al posto calcolato: parte di lato e in alto, ruotato, a 0,85 della misura, e torna a zero con curve diverse per x e y (così fa un arco) e con back.out sulla scala, che dà lo scatto. All’arrivo, uno sbuffo di ellissi di polvere che si allargano e svaniscono e un piccolo tremito elastico di tutto lo scheletro.

Chi chiama le ossa

pointermove somma la strada fatta dal puntatore: ogni STEP pixel parte il gruppo seguente; un tocco ne chiama uno subito. Se nessuno si muove da due secondi, ne parte uno ogni PACE secondi. A Rex completo e lasciato in pace per WAIT secondi, la sala lo smonta e lo rimonta.

Il ruggito e il respiro

Una timeline apre la mandibola di ROAR gradi e fa tremare collo e testa con un seno veloce che si spegne; poi le costole seguono un seno lento (BREATH), la coda un’onda e la testa si alza o si abbassa verso il puntatore, con un inseguimento morbido.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STEP`	script.js	`70`	Quanti pixel deve fare il puntatore per chiamare il gruppo d’ossa seguente.
`PACE`	script.js	`0.3`	I secondi fra un gruppo e l’altro quando la sala monta Rex da sola.
`FLIGHT`	script.js	`0.62`	Quanti secondi vola un osso prima di posarsi.
`SNAP`	script.js	`1.7`	Quanto supera la misura un osso quando scatta al suo posto (1 = niente).
`DUST`	script.js	`1`	Quanto sono grandi gli sbuffi di polvere (0 = niente).
`ROAR`	script.js	`26`	Quanto si aprono le fauci a Rex completo, in gradi.
`BREATH`	script.js	`1`	Quanto si muovono le costole col respiro (0 = ferme).
`WAIT`	script.js	`4.5`	I secondi che Rex resta completo prima che la sala lo smonti, se nessuno si muove.

Provali nel Playground

Quando usarla

Come apertura di un museo, di una mostra, di un parco a tema o di una visita guidata, di un sito per bambini e scuole, di un’app di scienze; in generale quando una prima schermata deve invitare a muoversi e premiare chi lo fa con qualcosa che si costruisce sotto gli occhi.

Sul telefono

Le stesse animazioni a misure adattate: lo scheletro e il basamento occupano tutta la larghezza in fondo alla sala, il titolo va su una riga sola sopra, e ogni tocco della sala chiama un gruppo d’ossa (anche il dito che scorre li chiama). Lasciato solo, Rex si monta da sé.

Con il movimento ridotto

Niente voli, scatti, tremiti né ruggito: ogni gruppo d’ossa compare al suo posto in dissolvenza e Rex resta fermo, senza respiro né sguardo; smontarlo è una dissolvenza.

Trappole

Le ossa della coda partono tutte dalla fine della vertebra precedente: solo la prima si attacca al bacino nel punto del giunto (a = 0). Con a = 0 per tutte, le sedici vertebre finivano una sopra l’altra e la coda spariva.
Gli angoli delle zampe sono stati trovati coi conti: con l’anca a 170 e le ossa lunghe 100, 92 e 50, le dita devono arrivare a 386 per poggiare sul basamento.
Lo scale() di SVG deforma anche il contorno: il cranio è alzato di 1,28 con un gruppo, va bene perché il contorno è sottile.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.

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

Collaudo

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