Gli anelli del giroscopio

3D, IntroSolo CSS, GSAPMediaPeso compresso: Demo 5,1 KBGSAP 28 KBGratisScarica lo zip

Un’intro di logo nello stile minimal, per un costruttore di strumenti inventato: tre anelli sottili con la scala dei gradi, uno dentro l’altro come in un giroscopio, girano in 3D sui loro assi e si fermano uno dopo l’altro di fronte a te, ognuno oltre di un soffio, mentre l’anello intorno sente il colpo. Quando riposano tutti si accende una tacca vermiglia e in mezzo atterra il nome, «Axial», lettera per lettera.

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 gyroscope rings</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>
  <!-- the opening of a made-up maker of instruments: three hairline rings, one inside the other like a gimbal, spin
       on their axes and come to rest one after the other, facing you, as three circles with a degree scale. Then the
       name lands in the middle. A click sets them spinning again. The script builds the rings and turns them -->
  <main class="stage" data-stage>
    <div class="scene" data-scene aria-hidden="true">
      <div class="gimbal" data-gimbal>
        <div class="ring" data-ring>
          <svg class="ring__face" viewBox="0 0 200 200"></svg>
          <div class="ring" data-ring>
            <svg class="ring__face" viewBox="0 0 200 200"></svg>
            <div class="ring" data-ring>
              <svg class="ring__face" viewBox="0 0 200 200"></svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1 class="name" data-name>Axial</h1>
    <p class="under" data-under>Instruments</p>
    <button class="again" type="button" data-again data-autoclic>Spin again</button>
  </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

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 «Gli anelli del giroscopio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta bianco caldo arrivano girando tre anelli sottili, uno dentro l’altro: ognuno è una fascia fra due cerchi con una tacca ogni cinque gradi, più lunga ogni trenta, e due perni corti sull’asse su cui gira, che lo legano all’anello intorno. Quello esterno gira sull’asse verticale, quello di mezzo sull’orizzontale dentro di lui, quello interno di nuovo sul verticale: in 3D si vedono ellissi che si incrociano. Rallentano e si fermano uno dopo l’altro di fronte a te, prima l’esterno, poi quello di mezzo, poi l’interno: ognuno va oltre il piano di un paio di gradi e si assesta, e l’anello che lo tiene sente il colpo e oscilla appena. Quando riposano tutti sono tre cerchi concentrici con la loro scala; la tacca in cima all’anello interno e il suo perno si accendono in vermiglio, e in mezzo atterrano le lettere di «AXIAL», una dopo l’altra, salendo un poco, prendendo peso e stringendosi sull’asse della larghezza. Sotto compare «Instruments». Dopo qualche secondo le lettere se ne vanno, gli anelli riprendono a girare, dall’interno, e tutto ricomincia. Il puntatore inclina un poco tutto il giroscopio; «Spin again» lo fa ripartire subito.

Come funziona

Tre anelli uno dentro l’altro

Ogni anello è un elemento con transform-style: preserve-3d che contiene il suo disegno SVG e l’anello successivo: così l’anello interno gira dentro quello di mezzo, che gira dentro l’esterno, come in un giroscopio vero. Gli assi sono rotationY, rotationX e di nuovo rotationY, e ognuno si tocca con GSAP sull’elemento suo, mentre il disegno sta nel figlio.

Il disegno di un anello

Lo script disegna ogni anello in pixel veri a ogni ridimensionamento: due cerchi a distanza di una fascia, settantadue tacche (più lunghe ogni trenta gradi) e due perni sull’asse su cui gira, lunghi fino al bordo interno dell’anello intorno. Le linee sono larghe un pixel, e la tacca in cima all’anello interno con il suo perno ha la classe dell’accento.

Rallentare e posarsi

Ogni anello parte da SPINS giri e mezzo indietro e arriva a OVERSHOOT gradi oltre il piano con un power3.out, che parte veloce e frena; poi torna a zero con un elastic.out(1, 0,38). Gli anelli arrivano sfalsati di STAGGER, e quando uno si posa l’anello che lo tiene fa un colpo di meno della metà dei gradi e torna con un altro elastico.

Il nome

Ogni lettera del nome è uno span con font-variation-settings legato a due variabili CSS, --w per il peso e --d per la larghezza di Archivo. GSAP le porta da 200 e 125 a WEIGHT e 100 mentre la lettera sale con un back.out, sfalsate di 0,07 s: la lettera atterra, prende peso e si stringe.

Il giro

Tutto è una timeline GSAP che alla fine ricomincia da sola: le lettere se ne vanno, gli anelli prendono velocità con un power2.in partendo dall’interno, e ripartono. Il puntatore inclina l’elemento che contiene i tre anelli con due gsap.quickTo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Axial'`	Il nome che atterra in mezzo.
`UNDER`	script.js	`'Instruments'`	La riga piccola sotto il nome.
`SPINS`	script.js	`2.5`	Quanti giri fanno gli anelli prima di fermarsi.
`LAND`	script.js	`1.6`	I secondi che l’anello esterno ci mette a fermarsi.
`STAGGER`	script.js	`0.5`	I secondi fra un anello che si ferma e il successivo.
`OVERSHOOT`	script.js	`2`	Di quanti gradi un anello va oltre il piano prima di posarsi.
`HOLD`	script.js	`3.5`	I secondi in cui tutto riposa prima che gli anelli ripartano.
`SIZE`	script.js	`0.66`	L’anello esterno, in parti dell’altezza della pagina.
`WEIGHT`	script.js	`640`	Il peso che prendono le lettere, da 300 a 900.

Provali nel Playground

Quando usarla

Per l’apertura del sito di un marchio di orologi, di strumenti di precisione, di bussole o di ottica, di uno studio di ingegneria o di un’app di navigazione: il giroscopio che si mette in bolla dice precisione, e poi lascia il posto al nome.

Sul telefono

Gli stessi tre anelli, larghi quasi tutto lo schermo, con le stesse rotazioni e gli stessi colpi; «Spin again» si tocca col dito. Senza puntatore il giroscopio non si inclina.

Con il movimento ridotto

Niente gira: gli anelli compaiono in dissolvenza già fermi di fronte a te, con la tacca accesa, e il nome compare già al suo peso.

Trappole

La tacca dell’accento, corta come le altre, spariva sotto il perno dell’anello: ora attraversa tutta la fascia e anche il perno si accende, e si vede al primo sguardo.
Misurati sul lato più corto della pagina, al telefono gli anelli restavano piccoli e lasciavano metà schermo vuota: la misura è il più piccolo fra l’88% della larghezza e la parte scelta dell’altezza.

Librerie

GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

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

Collaudo

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