La gara sulla cicloide

Fisica, SVGGSAPMediaPeso compresso: Demo 4,9 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, con fisica vera: due binari sottili vanno dallo stesso bordo allo stesso bordo, uno dritto passando dal fondo e uno a cicloide. Due perline partono ferme insieme e quella sulla curva arriva sempre prima, anche se la sua strada è più lunga; i tempi si fermano e nel titolo la parola curve prende l’accento.

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 cycloid race</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage aria-label="Swale couriers: the fastest way down is a curve. Click to race again.">
    <h1 class="head" data-head>The fastest way down is a <span class="head__key" data-key>curve</span>.</h1>

    <!-- two tracks from the same rim to the same rim: two straight lines through the bottom, and a cycloid -->
    <svg class="scene" data-scene aria-hidden="true">
      <path class="track track--line" data-line d="" />
      <path class="track track--curve" data-curve d="" />
      <line class="ledge" data-ledge-l />
      <line class="ledge" data-ledge-r />
      <circle class="bead bead--line" data-bead-line r="7" />
      <circle class="bead bead--curve" data-bead-curve r="7" />
    </svg>

    <dl class="times" data-times>
      <div class="times__row times__row--curve" data-row-curve>
        <dt>Curve</dt>
        <dd data-t-curve>0.00 s</dd>
      </div>
      <div class="times__row times__row--line" data-row-line>
        <dt>Straight</dt>
        <dd data-t-line>0.00 s</dd>
      </div>
    </dl>

    <p class="brand">Swale <span>couriers</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.

17 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 «La gara sulla cicloide» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina nera, sotto il titolo The fastest way down is a curve., due binari sottili si disegnano da un bordo all’altro: due linee dritte che si incontrano nel punto più basso, la strada più corta, e una cicloide chiara, la curva che disegna un punto di una ruota che rotola. Sul bordo di sinistra, su una piccola mensola, aspettano due perline una dentro l’altra: un anello chiaro per le linee dritte e un dischetto arancio per la curva. La mensola scivola via e le perline cadono da ferme con la stessa gravità e senza attrito: quella sulla curva scende quasi in verticale, prende velocità subito, passa sul fondo davanti e risale; quella sulle linee dritte parte piano e resta indietro. Sotto due tempi contano in centesimi. La perlina arancio arriva ferma sul bordo di destra e una mensola le scivola sotto con un piccolo rimbalzo: il suo tempo si ferma in arancio, 2.40 s, e nel titolo la parola curve diventa arancio, più pesante e più larga con una molla. L’anello arriva dopo, 2.85 s, e le si posa intorno. Dopo una pausa la gara riparte all’indietro, da destra a sinistra. Un clic la fa ripartire da capo. Il marchio in fondo è di un servizio di corrieri inventato, Swale.

Come funziona

Fisica esatta, non un easing

Su una cicloide x = r(θ − sin θ), y = r(1 − cos θ) una perlina che parte ferma dalla cuspide ha l’angolo della ruota che cresce in modo uniforme: θ = t·√(g/r). Sulle linee dritte l’accelerazione è costante, g·sin α, in discesa e poi in salita. Si sceglie g perché la curva impieghi RACE secondi da bordo a bordo; il dritto viene di conseguenza √(π² + 4)/π volte più lento, circa il 18,5% in più.

GSAP fa andare l’orologio

La timeline anima un numero solo, il tempo della gara, con ease none; una funzione mette le perline al loro posto con le formule e scrive i due tempi fermandoli a quello di arrivo di ognuna. Siccome i tempi d’arrivo si sanno in anticipo, la mensola che arriva, il tempo in arancio e la parola del titolo sono messi nella timeline proprio a quegli istanti.

Fermarsi sul bordo

Sul bordo d’arrivo ogni perlina ha velocità zero (l’energia torna tutta in altezza): è il momento giusto per una mensola che le scivoli sotto con back.out, senza nessun trucco. Le due perline hanno misure diverse, un anello e un dischetto più piccolo, così quando riposano insieme una sta dentro l’altra invece di coprirsi.

La parola che vince

La parola curve del titolo è uno span con font-stretch legato alla variabile --w (Mona Sans va da 75 a 125 di larghezza): all’arrivo della curva prende il colore d’accento, il peso passa da 360 a 640 e la larghezza da 88 a 100 con elastic.out, e alla gara dopo torna com’era.

Giro, telefono e movimento ridotto

Dopo l’entrata (i binari si disegnano con stroke-dashoffset, le perline compaiono con una molla) la timeline fa due gare, avanti e indietro, e poi riparte dall’etichetta loop. Le misure (raggio della ruota, perline, titolo e tempi) si rifanno a ogni ridimensionamento. Con il movimento ridotto si vede la gara finita, coi due tempi e la parola in arancio, in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RACE`	script.js	`2.4`	I secondi che la perlina sulla curva impiega da bordo a bordo (la gravità si regola di conseguenza).
`HOLD`	script.js	`1.6`	I secondi in cui le perline restano ferme sul bordo prima della gara di ritorno.
`BEAD`	script.js	`7`	Il raggio delle perline in pixel (cresce un poco sugli schermi grandi).
`WORD`	script.js	`'curve'`	La parola del titolo che si accende quando vince la curva.

Provali nel Playground

Quando usarla

Come apertura di una landing page che vuole dire «la strada più breve non è la più veloce»: un servizio di consegne o di corrieri, un’app di percorsi o di logistica, un corso di fisica o di matematica, un articolo divulgativo; o come illustrazione animata di una sezione «come funziona».

Sul telefono

Le stesse animazioni con le misure adattate: la cicloide prende tutta la larghezza dello schermo (è larga π volte la sua altezza, quindi resta bassa), il titolo va su due righe e i tempi stanno sotto.

Con il movimento ridotto

Niente corre: la gara finita, con le perline sul bordo di destra, i due tempi e la parola curve in arancio, compare in dissolvenza e resta.

Trappole

Le due perline uguali, ferme sullo stesso bordo, si coprivano: se ne vedeva una sola. L’anello è più grande del dischetto, così ferme una sta dentro l’altra.
Fermare le perline sul fondo con un respingente avrebbe voluto un rimbalzo inventato, e le due sarebbero arrivate nello stesso punto una addosso all’altra: arrivando sul bordo opposto si fermano da sole, con velocità zero, e la gara di ritorno parte da lì.
Nella legenda c’era un pallino colorato davanti a Curve e Straight: è tolto, il colore lo porta la parola stessa.
Le perline di 7 pixel su una cicloide larga 1300 si perdevano: la misura cresce col raggio della ruota, fino a 1,8 volte.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,9 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.