Il cursore a molla

Slider, Fisica, 3DCanvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Il rapporto di un compressore audio regolato su una molla d’acciaio: la manopola è un anello anodizzato fissato a metà della molla, e spostandolo le spire si stringono da una parte e si aprono dall’altra. Trascinato veloce manda onde di compressione lungo l’elica; lanciato, l’anello prosegue un poco e la molla lo riporta.

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 coil spring slider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the ratio of a studio compressor, set on a steel coil spring: the knob is an anodized collar fixed to the
         middle turn of the spring, and the spring runs from it to two end caps. Moving the collar squeezes the turns on
         one side and opens them on the other. The spring, the rod inside it, the collar and the caps are drawn by the
         script on the canvas; the grip only carries the keyboard's ring -->
    <div class="ratio" data-ratio>
      <div class="ratio__head">
        <span class="ratio__label" id="ratio-label">
          <svg class="ratio__icon" viewBox="0 0 24 24" aria-hidden="true">
            <path class="ratio__axes" d="M3.5 3.5v17h17"/>
            <path class="ratio__unity" d="M3.5 20.5L20.5 3.5"/>
            <path class="ratio__curve" data-curve d="M3.5 20.5L10 14L20.5 11"/>
          </svg>
          Ratio
        </span>
        <span class="ratio__value" aria-hidden="true"><span class="ratio__number" data-number>4.0</span><span class="ratio__unit">:1</span></span>
      </div>
      <div class="ratio__track" role="slider" tabindex="0" aria-labelledby="ratio-label" aria-orientation="horizontal" aria-valuemin="1" aria-valuemax="20" aria-valuenow="4.0" aria-valuetext="4.0 to 1" data-track data-autoclic>
        <canvas class="ratio__coil" aria-hidden="true" data-canvas></canvas>
        <span class="ratio__grip" aria-hidden="true" data-grip></span>
      </div>
      <!-- the two ends of the range, right under the collar's two last stops: the script writes them from RANGE -->
      <div class="ratio__scale" aria-hidden="true" data-scale>
        <span data-low></span>
        <span data-high></span>
      </div>
    </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.

29 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 cursore a molla» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero la scritta Ratio con una piccola curva arancione, il valore 4.0:1 a destra, e sotto una molla d’acciaio cromato distesa fra due tappi scuri, con dentro un’asta: arancione fino a un anello anodizzato arancione con le scanalature, grigio scuro dopo. Sotto la molla si specchia appena sul nero, e ai due capi della corsa stanno 1:1 e 20:1. Aprendo la pagina il filo si avvolge intorno all’asta da sinistra a destra mentre il numero sale, poi l’anello riceve un colpetto e la molla vibra. Trascinando l’anello le spire dalla parte verso cui va si stringono e quelle dietro si aprono; se si va veloci le spire non stanno al passo: si ammucchiano contro il tappo e un’onda di spire strette corre lungo la molla, avanti e indietro, con la luce che lampeggia sulle spire più dritte. Lasciato mentre corre, l’anello prosegue, la molla lo riporta e tutto oscilla fino a fermarsi. Spinto oltre la fine le spire si chiudono a pacco, acciaio pieno, e l’anello si ferma secco. Mentre scorre l’anello gira sulla sua filettatura e le scanalature rotolano; sotto il mouse prende più luce. La curva accanto al nome è quella del compressore e si appiattisce più il rapporto sale.

Come funziona

Un’elica vera

Ogni mezzo giro di filo ha la sua posizione lungo l’asse; fra uno e l’altro una curva morbida dà la posizione di ogni punto del filo, e il punto gira intorno all’asse: altezza R·cos θ, profondità R·sin θ. Lo spostamento di lato per la profondità (YAW) fa vedere la molla un po’ di fianco, e un poco di prospettiva fa la metà vicina di ogni spira appena più grande di quella lontana. A ogni fotogramma la molla si ridisegna su un canvas, in un’immagine fuori schermo che poi si posa due volte: dritta, e capovolta e sfumata per il riflesso.

Dal fondo verso chi guarda

L’ordine fa la profondità: il tappo destro, poi la molla di destra (le metà lontane, scure e sottili, poi l’asta, poi le metà vicine), l’anello, la molla di sinistra e per ultimo il tappo sinistro. Le metà vicine hanno un bordo nero che taglia le lontane e l’asta, un colore che va dalla luce in alto allo scuro e a un riflesso freddo in basso, e una riga di luce sul lato che guarda la lampada: più la spira sta dritta più brilla, così le spire strette lampeggiano quando passa un’onda.

Le onde

La molla è una catena di pesetti, uno per mezzo giro, legati da molle (COIL): calcolata a passi di 1/600 di secondo al massimo, con un freno sulla velocità di ognuno e uno più forte sulle differenze fra vicini, che spegne le increspature fitte. Quando la mano porta l’anello veloce le spire vicine restano indietro: si stringono davanti, si aprono dietro, e l’onda corre fino al tappo e torna.

La mano e il lancio

Tenuto, l’anello va dove va la mano; premuto lontano, la raggiunge su una molla rapida. Lasciato, tiene la velocità della mano degli ultimi 90 millisecondi per FLING, e una molla (COLLAR) lo riporta al suo valore: della molla sente solo le onde, non il carico fisso, altrimenti la parte stirata lo tirerebbe via dal valore. Quando tutto è lento e vicino al suo posto l’attrito della filettatura lo ferma, e il ciclo smette di disegnare.

Le spire a pacco

Due spire non possono passare una nell’altra: dopo ogni passo, dove due mezzi giri sono più vicini di mezzo filo vengono separati, in andata e in ritorno, e si muovono insieme. Oltre la fine della corsa l’anello cede sempre meno, finché la sua parte è acciaio pieno e si ferma secco. Frecce, Maiuscolo e i tasti Pagina spostano il rapporto, Inizio e Fine vanno ai capi; la scala è logaritmica come sui compressori (LOG_SCALE).

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START_AT`	script.js	`4`	Il rapporto all’apertura della pagina.
`RANGE`	script.js	`[1, 20]`	Il rapporto più basso e il più alto.
`STEP`	script.js	`0.1`	Di quanto si muove il rapporto alla volta.
`KEYS`	script.js	`[0.1, 1]`	Di quanto sposta il rapporto una freccia, e con Maiuscolo o coi tasti Pagina.
`LOG_SCALE`	script.js	`true`	Il rapporto cresce più in fretta verso destra, come sui compressori; spento, la scala è uniforme.
`TURNS`	script.js	`16`	Le spire della molla, metà per parte dell’anello.
`COIL`	script.js	`[9000, 0.24]`	Le molle del filo: quanto sono rigide (più lo sono, più corrono veloci le onde) e quanto sono frenate.
`COLLAR`	script.js	`[6, 3000, 0.16]`	L’anello: quanto pesa, quanto forte lo riporta il suo valore e quanto è frenato.
`FLING`	script.js	`0.9`	Quanta velocità della mano tiene l’anello quando lo si lascia.

Provali nel Playground

Quando usarla

Per il rapporto o la soglia di un compressore, la rigidità delle sospensioni nell’app di una bici, la tensione di una cinghia, la durezza di un materasso regolabile: ovunque un valore vuol dire quanto qualcosa spinge indietro.

Sul telefono

Il cursore prende la larghezza dello schermo meno un margine; la molla tiene tutte le sue spire, si accorcia solo la corsa. Sulla striscia della molla il dito trascina l’anello senza far scorrere la pagina (touch-action: none), che scorre normalmente fuori da lì. Premendo in un punto qualsiasi l’anello corre lì, e sotto il dito prende luce come col mouse.

Con il movimento ridotto

Niente avvolgimento all’apertura, niente onde e niente slancio: la molla prende subito la forma giusta per dove sta l’anello, che segue il dito e salta al valore scelto coi tasti. Il numero è già al suo valore; la luce sull’anello cambia senza movimento.

Trappole

Vista troppo di lato, la metà lontana di ogni spira finiva dietro la metà vicina: lo spostamento di lato per la profondità annullava metà del passo, e la molla sembrava una fila di ganci. La molla è avvolta nell’altro verso e vista quasi di fianco (YAW 0,14); l’anello e i tappi hanno una vista un po’ più obliqua tutta loro (FACE), per far vedere le loro facce tonde.
Il bordo nero della metà vicina, con le punte tonde, intaccava la metà lontana proprio dove il filo gira dietro, in cima e in fondo a ogni spira, e lì nascevano delle perline: il bordo si ferma un poco prima delle due estremità, con le punte dritte.
Le molle del filo, tese fra i tappi, spingono l’anello verso il centro con un carico fisso (una parte stretta, l’altra stirata): tenuto al suo valore solo dalla sua molla, l’anello si sarebbe fermato 30 pixel più in là. L’anello sente solo le onde, cioè quanto le spire vicine si scostano da una molla distribuita in modo uniforme.
Le spire che si toccano non devono passare una nell’altra: dopo ogni passo le distanze sotto mezzo filo si correggono avanti e indietro lungo la catena, e l’anello non può andare oltre il punto in cui la sua parte è a pacco, altrimenti le spire non ci starebbero.
Una coda di oscillazioni sotto il pixel teneva il ciclo acceso per due secondi e mezzo: quando tutto è lento e vicino al posto giusto l’attrito della filettatura quadruplica il freno, e il ciclo si spegne in un secondo e mezzo.
Il colore della metà lontana, scuro in basso, la rendeva invisibile: dentro la molla, in basso, il filo guarda in su verso la luce, ed è lì che deve essere più chiaro.

Librerie

GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.

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

Collaudo

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