Il cursore del pettine

Slider, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 10 KBGSAP 28 KBGratisScarica lo zip

Il budget di un progetto nel modulo di contatto di uno studio, scelto su un pettine di tacche sottili: il pomello vermiglio sta fra i denti, quelli davanti si piegano sotto la sua spinta e si allungano, poi gli scivolano dietro e vibrano come un pettine pizzicato, con un’onda che corre lungo la fila e si spegne. La cifra grande sopra si allarga col budget. Stile minimal.

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 comb slider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the budget field of a studio's contact form, on a comb: a row of hairline teeth on a spine. The knob stands
         among the teeth; as it passes they lean out of its way and grow, each on a spring of its own and tied to its
         neighbours, so they straighten behind it in a wave that dies out. The teeth and the knob are drawn by the
         script on the canvas; the real range input underneath carries the value, the keys and the screen reader -->
    <div class="budget" data-budget>
      <div class="budget__head">
        <label class="budget__label" for="budget-range">Project budget</label>
        <span class="budget__note" aria-hidden="true"><span class="budget__note-text" data-note>A full website</span></span>
      </div>
      <p class="budget__value" aria-hidden="true"><span class="budget__cur">€</span><span class="budget__num" data-num>40k</span></p>
      <div class="budget__comb" data-comb data-autoclic>
        <canvas class="budget__canvas" aria-hidden="true" data-canvas></canvas>
        <input class="budget__range" type="range" id="budget-range" name="budget" min="5000" max="100000" step="5000" value="40000" data-range>
      </div>
      <div class="budget__scale" aria-hidden="true">
        <span data-lo>€5k</span>
        <span data-hi>€100k+</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.

37 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 del pettine» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la scritta Project budget e a destra, in grigio, cosa compra di solito quella cifra: A full website. Sotto, grande, €40k in Roboto Flex. Sotto ancora un pettine: una riga sottile con una fila di denti, uno più alto per ogni passo di 5.000 euro e due più bassi in mezzo, neri fino al pomello e grigio chiaro dopo; il pomello è una barretta vermiglia ritta fra i denti, e quelli vicini sono un poco più alti, come una piccola corona. Ai due capi €5k e €100k+. Aprendo la pagina la riga si disegna, i denti spuntano uno dopo l’altro e il pomello sale all’inizio del pettine e corre fino a 40k, mentre la cifra conta. Trascinando il pomello (o premendo dove si vuole sul pettine) i denti davanti vengono spinti e si piegano, si ammucchiano un poco contro di lui e si allungano; quando un dente è piegato abbastanza gli scivola dietro di scatto e vibra, e la vibrazione passa ai vicini e corre lungo il pettine come un’onda che si smorza. Più il pomello corre veloce, più i denti si piegano prima di lasciarlo passare; la sua testa resta indietro e, quando si ferma, oscilla una volta. Lasciato, il pomello va al passo più vicino, un pixel oltre e indietro. La cifra in alto si allarga col budget, stretta a 5k e larghissima a 100k+, e diventa più sottile mentre il pomello corre; la riga in grigio cambia con un breve scorrimento: A landing page, A full website, A brand and a website, A digital product. Sotto il pomello il cursore si ingrandisce un poco, e preso si schiaccia.

Come funziona

Una fila di pendoli legati

Ogni dente è un peso su una molla (TOOTH_SPRING) che lo vuole dritto, e due molle lo legano ai vicini (COUPLING): la differenza fra un dente e i due accanto lo tira. È la corda discreta dei libri di fisica, così una piega che non è condivisa non resta lì ma corre lungo la fila come un’onda, e lo smorzamento la spegne in un secondo e mezzo. Le molle si calcolano sul ticker di GSAP a passi di 1/240 di secondo, con il passo limitato a 1/30.

Il pomello è solido

La punta di ogni dente resta a CLEAR pixel dal centro del pomello, dalla parte dove sta il dente: una molla di contatto molto rigida la tiene fuori. Così il pomello che corre spinge le punte davanti a sé e piega quei denti; quando uno è piegato di SLIP della sua lunghezza cambia parte, la molla di contatto lo fa scattare dall’altra e lui vibra. Più il pomello è lento, prima i denti lo lasciano passare; un dente che ha la radice proprio dietro un pomello fermo resta dritto, nascosto da lui.

Il disegno

A ogni fotogramma il canvas ridisegna i denti come curve di Bézier quadratiche che partono dritte dalla radice e si piegano in punta, come una lama vera; quando un dente si piega si abbassa anche un poco. Quattro tratti in tutto: denti alti e bassi, neri prima del pomello e grigi dopo. I denti vicini al pomello si allungano di LIFT (di più quando corre, quando lo si tocca o lo si tiene), e la corsa li trascina un poco con sé (DRAG). Quando tutto è fermo, il ticker si toglie.

Il pomello e la mano

Mentre lo si tiene il pomello segue la mano su una molla rigidissima, appena dietro; oltre i due capi cede solo un poco. Lasciato, il valore viene da dove era la mano, e la molla di KNOB_SPRING lo porta al passo più vicino con un pixel di troppo. La sua testa ha una molla sua che la fa restare indietro nella corsa e oscillare una volta all’arrivo.

La cifra sugli assi

La cifra segue il pomello, non il valore scritto: il suo asse della larghezza (font-stretch di Roboto Flex, da 25 a 151) va da WIDTH[0] a WIDTH[1] lungo il pettine, così cresce mentre lo si trascina, e il peso scende fino a 360 con la velocità e torna a 620 quando si posa. La riga in grigio sopra cambia scorrendo nella sua maschera, in su quando il budget sale e in giù quando scende.

Il cursore vero, i tasti e l’anteprima

Sotto il canvas c’è un input range vero, invisibile, che tiene il valore, l’etichetta, i tasti (frecce, Pagina su e giù, Inizio, Fine) e il lettore di schermo con un aria-valuetext come €40,000; il cerchio del fuoco si disegna solo arrivando coi tasti. Un clic da script (detail 0, quello dell’anteprima) fa da mano finta: porta il budget a 90k, poi giù a 15k e di nuovo dov’era.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MIN`	script.js	`5000`	Il budget più piccolo.
`MAX`	script.js	`100000`	Il budget più grande, scritto col più: tanto o di più.
`STEP`	script.js	`5000`	Di quanto si muove il budget: un dente alto per ogni passo.
`START_AT`	script.js	`40000`	Il budget all’apertura della pagina.
`CURRENCY`	script.js	`'€'`	Il segno davanti alle cifre.
`TEETH`	script.js	`3`	Quanti denti ci sono da un passo al successivo (sullo schermo stretto meno, se starebbero troppo vicini).
`CLEAR`	script.js	`5.5`	Quanto può avvicinarsi la punta di un dente al centro del pomello, in pixel.
`SLIP`	script.js	`0.4`	Quanto si piega un dente davanti al pomello, in parte della sua lunghezza, prima di scivolargli dietro.
`LIFT`	script.js	`18`	Di quanto si allungano i denti vicini al pomello, in pixel.
`REACH`	script.js	`44`	Fin dove i denti sentono il pomello, in pixel.
`DRAG`	script.js	`0.006`	Quanto il pomello che corre si trascina dietro i denti vicini.
`TOOTH_SPRING`	script.js	`[300, 0.22]`	La molla di ogni dente: quanto è rigida e quanto è frenata (meno vuol dire che vibra più a lungo).
`COUPLING`	script.js	`700`	Quanto ogni dente tira i vicini: più è alto, più l’onda corre veloce e lontano.
`KNOB_SPRING`	script.js	`[320, 0.78]`	La molla del pomello quando nessuno lo tiene: quanto è rigida e quanto è frenata.
`WIDTH`	script.js	`[32, 148]`	L’asse della larghezza della cifra al budget più piccolo e al più grande (da 25 a 151).
`NOTES`	script.js	`[[15000, 'A landing page'], [40000, 'A full website'], [70000, 'A brand and a website'], [100000, 'A digital product']]`	Cosa compra di solito un budget: fino a quella cifra, quelle parole.

Provali nel Playground

Quando usarla

Per il budget nel modulo di contatto di uno studio o di un’agenzia, la cifra di un preventivo, la dimensione del testo in un’app di lettura, o qualunque cursore a passi dove si vuole che il gesto si senta nelle dita senza aggiungere niente alla pagina.

Sul telefono

Il cursore prende la larghezza dello schermo meno un margine e la cifra si rimpicciolisce un poco; se i denti starebbero a meno di 5 pixel l’uno dall’altro, fra un passo e l’altro ce ne sono meno. Col dito si trascina di lato mentre la pagina scorre ancora in su e in giù (touch-action: pan-y), e un tocco sul pettine porta lì il pomello attraverso i denti. Molle e onde sono le stesse.

Con il movimento ridotto

Niente molle, niente onde, niente entrata: il pomello è subito dove lo si porta, i denti vicini sono già alla loro altezza e piegati fuori dalla sua strada, e la cifra e la riga grigia cambiano con una dissolvenza. La larghezza della cifra segue lo stesso il budget.

Trappole

Con un campo di forza morbido che allontanava i denti dal pomello, al suo passaggio i denti si spostavano da una parte all’altra in modo continuo e non vibrava niente: serviva un contatto vero, con il dente che resta da una parte finché non scivola dall’altra.
Da fermo, un dente con la radice proprio sotto il pomello restava piegato e la sua punta spuntava a destra come un frammento staccato: quando il pomello è lento, i denti con la radice dietro di lui non lo sentono e restano dritti, nascosti.
Con l’alone bianco largo intorno al pomello i denti piegati sembravano spezzati: l’alone è sottile come un capello, e i denti passano dietro il pomello.
Un salto lungo del pomello (un clic in fondo al pettine) lanciava i denti alla sua velocità e li faceva girare quasi stesi: la punta di un dente non va oltre 560 pixel al secondo e la piega non supera tre quarti della sua lunghezza.
Mettendo il fuoco sull’input al tocco, perché le frecce funzionino dopo un trascinamento, Chrome mostrava il cerchio del fuoco anche col mouse: il cerchio si disegna solo se l’ultimo gesto è stato un tasto.
Il clic sull’etichetta Project budget arriva all’input con detail 0, come quello dell’anteprima, e avrebbe fatto partire la mano finta: la mano finta parte solo da un clic sul pettine.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

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

Collaudo

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