Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
I cursori delle dosi
Tre righe come i cursori di un mixer: una banda colorata si allunga e dentro la stessa scritta è scura, così la parola cambia colore proprio sul bordo. Le dosi salgono su una molla e si regolano col mouse, col dito e coi tasti.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The dose sliders</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="pagina">
<p class="nota" data-nota>Move the mouse over a row: the dose follows the pointer, and the word changes colour right on the edge. You can drag it too, or use the arrow keys.</p>
<header class="testa">
<p class="testa__etichetta">The recipe</p>
<h1 class="testa__titolo">Three doses, by eye.</h1>
</header>
<!-- ogni riga è un cursore: una banda colorata che si allunga, con dentro la stessa scritta in scuro -->
<div class="dosi" data-dosi>
<div class="dose" data-dose="olio" data-riposo="0.62" role="slider" tabindex="0" aria-label="Oil" aria-valuemin="0" aria-valuemax="100" style="--banda: #D7B24A">
<span class="dose__nome" aria-hidden="true">Oil</span>
<div class="dose__banda" data-banda aria-hidden="true"><span class="dose__nome dose__nome--dentro">Oil</span></div>
<span class="dose__quanto" data-quanto aria-hidden="true"></span>
<i class="dose__scala" aria-hidden="true"></i>
</div>
<div class="dose" data-dose="sale" data-riposo="0.38" role="slider" tabindex="0" aria-label="Salt" aria-valuemin="0" aria-valuemax="100" style="--banda: #B9C7CF">
<span class="dose__nome" aria-hidden="true">Salt</span>
<div class="dose__banda" data-banda aria-hidden="true"><span class="dose__nome dose__nome--dentro">Salt</span></div>
<span class="dose__quanto" data-quanto aria-hidden="true"></span>
<i class="dose__scala" aria-hidden="true"></i>
</div>
<div class="dose" data-dose="peperoncino" data-riposo="0.55" role="slider" tabindex="0" aria-label="Chilli" aria-valuemin="0" aria-valuemax="100" style="--banda: #D8452B">
<span class="dose__nome" aria-hidden="true">Chilli</span>
<div class="dose__banda" data-banda aria-hidden="true"><span class="dose__nome dose__nome--dentro">Chilli</span></div>
<span class="dose__quanto" data-quanto aria-hidden="true"></span>
<i class="dose__scala" aria-hidden="true"></i>
</div>
</div>
<p class="piede">Grandma’s doses don’t fit on a sheet of paper: you set them by eye, tasting as you go.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.
43 valori da cambiare
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 «I cursori delle dosi» da Animorio e adattala al mio sitoCosa fa
Una ricetta in tre righe a tutta larghezza: Olio, Sale, Peperoncino, scritti enormi e stretti. Ogni riga è un cursore: una banda del suo colore, oro, grigio sale, rosso, si allunga da sinistra, e dentro la banda la stessa parola è scura, così la scritta cambia colore esattamente sul bordo. Quando le righe entrano nello schermo le dosi salgono al loro posto una dopo l’altra, su una molla, con un piccolo rimbalzo. Col mouse sopra la dose segue il puntatore; si trascina col dito e si regola con le frecce. Sul bordo della banda c’è la dose scritta a parole, «un filo», «due pizzichi», «quanto basta», «troppo», e in fondo a ogni riga una scala di venti tacche.
Come funziona
La stessa parola due volte
In ogni riga la parola c’è due volte, nello stesso punto: una chiara sul fondo, una scura dentro la banda. La banda è tagliata da clip-path: inset(0 calc((1 − livello) × 100%) 0 0), con il livello in una variabile CSS: dove finisce la banda finisce anche la parola scura, e il bordo taglia le lettere a metà.
Una molla vera
Il livello è una piccola simulazione: accelerazione = rigidezza × (meta − livello) − smorzamento × velocità, integrata in passi di 1/240 di secondo. All’entrata la molla è morbida (90 e 9) e rimbalza; quando segue il puntatore è rigida (260 e 30) e arriva senza oscillare.
Mouse, dito e tastiera
Il passaggio del mouse si ascolta sulla finestra e cerca la riga con closest(); col dito si trascina con setPointerCapture, e touch-action: pan-y lascia scorrere la pagina in verticale. Ogni riga è un role="slider" con aria-valuenow e aria-valuetext: le frecce la spostano di 5, Home e Fine la portano agli estremi.
La dose a parole
Il livello si divide in sei fasce, ognuna con la sua parola, diversa per olio, sale e peperoncino. La parola sta attaccata al bordo della banda; oltre l’80% passa dentro, scura, perché fuori non ci sta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MOLLA, SEGUE | script.js | 90/9, 260/30 | Rigidezza e smorzamento della molla all’entrata e quando segue il puntatore. |
PAROLE | script.js | 6 per riga | Le dosi a parole di ogni riga, dalla più piccola alla più grande. |
data-riposo | index.html | 0.62, 0.38, 0.55 | Dove si ferma ogni dose all’entrata. |
--banda | index.html | per riga | Il colore della banda di ogni riga. |
Quando usarla
Per un elenco di servizi, di ingredienti o di competenze da far sembrare un pannello di controllo: tre o quattro righe, parole corte, e qualcosa da regolare.
Sul telefono
Le righe sono più basse e le parole più piccole; la dose si trascina di lato col dito o si fissa con un tocco, mentre in verticale la pagina scorre come sempre.
Con il movimento ridotto
Niente molla: le dosi sono già al loro posto e si spostano subito, senza rimbalzi.
Trappole
- Colorare la parola con una sfumatura non la taglia netta sul bordo: servono due copie della parola, una dentro la banda tagliata da clip-path.
- Se la molla usa il tempo del fotogramma come passo unico, a 30 fotogrammi al secondo diventa instabile: si integra in passi piccoli e fissi.
- Con setPointerCapture ma senza touch-action: pan-y, al telefono ogni riga blocca lo scorrimento della pagina.
- Un cursore fatto di div non si sente coi lettori di schermo: role="slider", aria-valuenow, aria-valuetext e le frecce lo rendono vero.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,3 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 21 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.
