Il cursore a corda

Slider, Fisica, SVGGSAPMediaPeso compresso: Demo 6,0 KBGSAP 28 KBGratisScarica lo zip

Un cursore del volume fatto come una corda tesa: trascinando la manopola si può tirare la corda in su o in giù e, lasciata, vibra; il valore sta in una bolla su uno stelo che si inclina quando la manopola corre e torna dritta oscillando.

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 string slider</title>
  <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>
  <main class="stage">
    <!-- the slider: a string held at its two ends with the knob riding on it. Dragging, the pointer can pull the string
         up or down; let go, it twangs. The value hangs over the knob in a bubble on a stem, which leans with the
         speed and swings back. The string is drawn by the script -->
    <div class="volume" data-volume>
      <div class="volume__head">
        <svg class="volume__icon" viewBox="0 0 24 24" aria-hidden="true">
          <path class="volume__speaker" d="M3.5 9.2h3.6l4.9-4.1v13.8l-4.9-4.1H3.5z"/>
          <path class="volume__wave" data-wave d="M15.2 9.4a3.7 3.7 0 0 1 0 5.2"/>
          <path class="volume__wave" data-wave d="M17.8 6.8a7.4 7.4 0 0 1 0 10.4"/>
          <path class="volume__wave" data-wave d="M20.4 4.2a11.1 11.1 0 0 1 0 15.6"/>
          <path class="volume__mute" data-mute d="M15.6 9.6l4.8 4.8M20.4 9.6l-4.8 4.8"/>
        </svg>
        <span class="volume__label" id="volume-label">Volume</span>
      </div>
      <div class="volume__track" role="slider" tabindex="0" aria-labelledby="volume-label" aria-valuemin="0" aria-valuemax="100" data-track data-autoclic>
        <svg class="volume__string" aria-hidden="true" data-string>
          <!-- while the string shakes, the eye sees the space it sweeps: two pale shapes between its two extremes -->
          <path class="volume__sweep volume__sweep--empty" data-sweep-empty/>
          <path class="volume__sweep volume__sweep--full" data-sweep-full/>
          <path class="volume__empty" data-empty/>
          <path class="volume__full" data-full/>
        </svg>
        <div class="volume__thumb" data-thumb>
          <span class="volume__knob" data-knob></span>
          <span class="volume__bubble" aria-hidden="true" data-bubble><span class="volume__number" data-number></span></span>
        </div>
      </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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un altoparlante con due onde e la scritta Volume, e sotto una linea, corallo fino a una manopola bianca e grigio chiaro dopo; sopra la manopola, su uno stelo, una bolla nera col valore 64. Aprendo la pagina la linea si apre dal centro, la manopola spunta e la corda viene pizzicata una volta. Trascinando la manopola il valore cambia e la bolla si inclina all’indietro, tanto più quanto più si va veloci, e torna dritta oscillando quando ci si ferma; portando il puntatore in su o in giù la corda si tende in due tratti dritti fino alla manopola. Lasciata, la corda vibra con la manopola sopra, e per un attimo intorno resta l’alone chiaro dello spazio che spazza. Premendo sulla linea la manopola salta lì; le frecce della tastiera la muovono, e a ogni pressione la corda si pizzica appena. L’altoparlante mostra una, due o tre onde secondo il volume, e a zero una crocetta corallo.

Come funziona

Una corda e una manopola

La corda sono due path SVG dritti, dal capo sinistro alla manopola e dalla manopola al capo destro; la manopola è un elemento HTML che lo script sposta con transform. Lo slider, con role slider e tabindex, è tutta la linea: così un clic in qualsiasi punto le dà il fuoco e da lì funzionano i tasti.

Tirare

Mentre la si tiene, la corda va dove la porta la mano: la distanza del puntatore dalla corda per PULL, al massimo MAX_PULL pixel. La segue in fretta e senza rimbalzi, e lo script tiene conto della velocità con cui si muove, per il momento in cui la si lascia.

La vibrazione

Lasciata, la corda è una molla con la rigidità e lo smorzamento di TWANG, calcolata sul ticker di GSAP a passi di 4 millisecondi. L’alone viene dall’ampiezza della vibrazione, √(y² + (v/ω)²): due forme chiare che vanno da quanto sale a quanto scende, e svaniscono con lei.

La bolla sullo stelo

La bolla è un pendolo: vuole inclinarsi della velocità della manopola per SWING, al contrario (al massimo 22 gradi), e ci arriva con una molla poco frenata, così oltrepassa e torna. Gira intorno al piede dello stelo, dove tocca la manopola.

I tasti e l’anteprima

Le frecce muovono il valore di KEYS[0], con Maiuscolo o coi tasti Pagina di KEYS[1], Inizio e Fine vanno ai capi; ogni pressione dà alla corda una piccola spinta. Un clic da script (detail 0, quello dell’anteprima della libreria) fa da mano finta: tira la corda in su, porta la manopola su un altro valore e la lascia.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START_AT`	script.js	`64`	Il valore all’apertura della pagina, da 0 a 100.
`PULL`	script.js	`0.42`	Quanto la corda segue il puntatore in su e in giù mentre la si tiene.
`MAX_PULL`	script.js	`32`	Quanto si può tirare la corda, in pixel.
`TWANG`	script.js	`[1500, 0.06]`	La molla della corda lasciata: quanto è rigida e quanto è frenata.
`SWING`	script.js	`0.05`	Quanto si inclina la bolla con la velocità della manopola.
`KEYS`	script.js	`[1, 10]`	Di quanto sposta il valore una freccia, e con Maiuscolo o coi tasti Pagina.

Provali nel Playground

Quando usarla

Per il volume di un lettore, la luminosità, un filtro dei prezzi, una quantità: ovunque si sceglie un valore lungo una linea e toccarla deve essere un piacere.

Sul telefono

Il cursore prende la larghezza dello schermo meno un margine. Col dito si trascina di lato, mentre lo scorrimento verticale della pagina resta libero (touch-action: pan-y); un trascinamento partito di lato può poi tirare la corda anche in su o in giù.

Con il movimento ridotto

La corda non si tende e non vibra, la bolla non si inclina e non c’è l’entrata: la manopola segue il dito, salta dove si preme e va dritta al valore scelto coi tasti.

Trappole

Se il ruolo di slider stesse sulla manopola, un clic sulla linea non le darebbe il fuoco e i tasti non risponderebbero; e dandoglielo da script, Chrome mostrerebbe l’anello della tastiera anche col mouse. Per questo lo slider è tutta la linea.
Con la rigidità della corda una molla calcolata a fotogrammi interi esploderebbe al primo fotogramma lento: lo script la calcola a passi di 4 millisecondi al massimo.
Con i tasti la manopola scivola verso il valore nuovo: una pressione dopo l’altra deve partire dal valore cercato, non da quello di passaggio, o le pressioni veloci andrebbero perse.
Un path SVG lungo zero con le punte tonde si vede come un puntino: a 0 e a 100 uno dei due tratti della corda è lungo zero, e resta nascosto sotto la manopola.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.