Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il cursore di caramella mou
La dolcezza di una torta scelta su una pallina di caramella mou: tirata via da una goccia di caramello posata sulla carta da forno, si porta dietro un filo che si stira, si assottiglia, si incurva per il peso e luccica. Spinta indietro, il filo molle si affloscia e si ritira piano come il caramello caldo. Il colore va dal bruciato amaro al biondo, e la parola sopra diventa più grassa e più morbida con la dolcezza.
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 toffee sweetness slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- how sweet a patisserie makes your cake, chosen on a ball of soft toffee. A dollop of caramel sits at the
start of a strip of baking paper; the knob is a glossy toffee ball pulled out of it, and the slider's fill is
the thread of caramel that stretches between the two. The paper, the dollop, the thread and the ball are drawn
by the script on the canvas; the real range input underneath carries the value, the keys and the screen
reader -->
<div class="sweet" data-sweet>
<div class="sweet__head">
<label class="sweet__label" for="sweet-range">Sweetness</label>
<span class="sweet__note" aria-hidden="true"><span class="sweet__note-text" data-note>Our house recipe</span></span>
</div>
<p class="sweet__word" aria-hidden="true" data-word>Balanced</p>
<div class="sweet__track" data-track data-autoclic>
<canvas class="sweet__canvas" aria-hidden="true" data-canvas></canvas>
<input class="sweet__range" type="range" id="sweet-range" name="sweetness" min="1" max="5" step="1" value="3" data-range>
</div>
<div class="sweet__scale" aria-hidden="true">
<span data-lo>Bitter</span>
<span data-hi>Very sweet</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.
38 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 «Il cursore di caramella mou» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Sweetness e a destra, piccola e grigia, una nota su cosa sa quella dolcezza (Our house recipe). Sotto, grande, la parola della dolcezza scelta, Balanced, in Fraunces color caramello. Più giù una striscia di carta da forno color avorio con cinque tacche stampate: a sinistra una goccia di caramello a cupola, lucida, e a metà strada una pallina di caramella mou con un riflesso di finestra, una venatura di crema e l’ombra sulla carta, con accanto una macchia ambrata dove la luce passa attraverso il caramello. Fra la goccia e la pallina corre un filo di caramello che si allarga dove si attacca a tutte e due e si incurva un poco nel mezzo. Aprendo la pagina la pallina nasce dalla goccia e viene tirata fuori fino a Balanced, col filo che si stira dietro di lei. Trascinandola a destra il filo si allunga, si fa più sottile e più chiaro; tirato in fretta resta teso, si assottiglia di più vicino alla pallina e si divide in perline, poi il caramello scorre alla lunghezza nuova e torna a pendere morbido. Spinta a sinistra il filo in più si affloscia e cade verso la carta, poi si ritira nella pallina e nella goccia e si rialza, lento e viscoso. La pallina rotola (la crema gira dentro di lei), si allunga quando corre e tremola quando si ferma; sotto il puntatore si gonfia un poco e premuta si schiaccia. Il colore del caramello va dal bruno bruciato di Bitter al biondo di Very sweet, i riflessi scorrono lungo il filo quando si muove e le tacche già passate prendono il colore del caramello. La parola sopra cambia con la pallina: quella vecchia si scioglie nella sua riga lettera per lettera, la nuova ne risale e si assesta con un rimbalzo, e intanto diventa più grassa, più tonda e più chiara con la dolcezza.
Come funziona
Un filo di pesi
Il filo è una catena di 28 pesi con l’integrazione di Verlet: il primo è fermo sulla goccia, l’ultimo è attaccato alla pallina. Ogni coppia di pesi vicini è tenuta da un vincolo di distanza, rigido contro lo stiramento e quasi molle contro lo schiacciamento, così un filo lento si piega e cade invece di spingere. La viscosità avvicina la velocità di ogni peso a quella dei vicini, e le onde diventano lente e dense.
Il caramello che scorre
La lunghezza a riposo di ogni pezzo non è fissa: scorre verso quella che il filo vuole avere (la distanza fra goccia e pallina con quel poco in più che serve per pendere) in FLOW secondi, e un pezzo stirato oltre il limite elastico di STRETCH cede e si allunga anche lui. È una molla di Maxwell con una soglia: il peso del filo da solo non basta a farlo colare. Il filo in più di una spinta indietro viene ripreso soprattutto dalla pallina e dalla goccia, quindi il filo si affloscia, poi si ritira.
Lo spessore dal volume
Lo spessore viene dal caramello che c’è: più il filo è lungo più è sottile (fra THICK[0] e THICK[1]), e dove un pezzo è stirato oltre la sua lunghezza a riposo si strozza, dove è schiacciato si gonfia. Dopo una tirata veloce le perline stanno sul caramello stesso e viaggiano con lui; alle due estremità il filo si allarga in un raccordo che entra nella goccia e nella pallina.
Il disegno sul canvas
A ogni fotogramma la catena passa per una curva di Catmull-Rom e si disegna in quattro passate: il bordo scuro, il corpo, la luce dentro il caramello e il riflesso, ognuna col colore del suo spessore (il caramello sottile lascia passare più luce e sembra più biondo). Il riflesso è più forte dove il filo guarda la lampada, quindi i lampi corrono lungo il filo quando oscilla. La pallina ha i gradienti della sfera, la luce che la attraversa, il bordo in ombra, la finestra riflessa e una venatura di crema calcolata su una sfera vera e girata quanto ha rotolato.
La parola
La parola si sposta sugli assi del peso e di SOFT di Fraunces col caramello, e da Sweet in su accende WONK, che piega un poco le lettere. Quando cambia, ogni lettera della vecchia si schiaccia verso la riga allargandosi, e quelle della nuova ne risalgono con una molla elastica; se un cambio arriva mentre l’altro è ancora in corso, la goccia vecchia si salta, così non ci sono mai due parole insieme.
Il campo vero, i tasti e l’anteprima
Sotto il disegno c’è un input range vero, invisibile: porta il valore, le frecce, Pagina su e giù, Inizio e Fine e quello che legge lo screen reader (la parola e la nota). Il cerchio di fuoco appare solo arrivando coi tasti. La fisica gira sul ticker di GSAP a passi di 1/240 di secondo e si ferma quando tutto è fermo. Un clic da script (detail 0, quello dell’anteprima) fa da mano finta: tira la pallina fino in fondo, la riporta a Bitter e poi dov’era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_AT | script.js | 3 | La dolcezza all’apertura della pagina, da 1 (la prima parola) all’ultima. |
WORDS | script.js | ['Bitter', 'Lightly sweet', 'Balanced', 'Sweet', 'Very sweet'] | Le parole della dolcezza, dalla prima all’ultima tacca: quante sono, tante tacche. |
NOTES | script.js | ['Dark cocoa, no glaze', 'A spoon of wildflower honey', 'Our house recipe', 'Salted caramel drizzle', 'Double caramel and fudge'] | La nota in alto a destra per ogni dolcezza: cosa sa quella torta. |
BALL | script.js | 20 | Il raggio della pallina di mou, in pixel. |
THICK | script.js | [5.2, 2.3] | Metà dello spessore del filo quando è più corto e quando è più lungo, in pixel. |
SAG | script.js | 1 | Quanto pesa il filo: più alto, più si incurva da fermo e più in fretta cade quando è molle. |
FLOW | script.js | 0.42 | In quanti secondi il caramello scorre alla lunghezza nuova: più alto, più resta teso e sottile dopo una tirata e più lento si ritira. |
STRETCH | script.js | 0.06 | Quanto si stira il caramello prima di cominciare a colare, come parte della sua lunghezza. |
BEADS | script.js | 1 | Quanto una tirata veloce divide il filo in perline (0 mai). |
SPRING | script.js | [380, 0.42] | La molla che porta la pallina alla tacca quando nessuno la tiene: quanto è rigida e quanto è frenata. |
Quando usarla
Per la dolcezza di una torta su ordinazione in una pasticceria o in un’app di consegne, lo zucchero nel caffè o nel tè, la cottura del caramello in un negozio di dolci, o qualunque scelta su una scala morbida dove il valore deve far venire l’acquolina.
Sul telefono
Il cursore prende la larghezza dello schermo meno un margine e la pallina arriva in fondo alla carta; la parola grande scende a 44 pixel. Col dito si trascina di lato mentre la pagina scorre ancora in su e in giù (touch-action: pan-y); un tocco sulla carta manda lì la pallina, che corre e poi segue il dito. Fisica, perline e riflessi sono gli stessi.
Con il movimento ridotto
Niente fisica, niente entrata, niente rotolare né tremolare: la pallina è subito sulla tacca e il filo pende già fermo, con lo spessore giusto per la sua lunghezza. Il colore del caramello cambia lo stesso, e la parola e la nota cambiano con una dissolvenza.
Trappole
- Con la lunghezza a riposo che cola sempre verso quella vera, il peso del filo lo stirava un poco, il filo colava e in due secondi era steso sulla carta: ora cola solo un pezzo stirato oltre il limite elastico.
- I vincoli di distanza tengono un filo solo fino a un certo punto, e basta un centesimo di lunghezza in più per una pancia profonda: un filo teso porta il peso nella tensione, quindi la gravità cresce con quanto il filo è molle.
- Spinto indietro in fretta, il filo in più faceva anelli in aria e usciva dall’altro lato della pallina: ora non regge lo schiacciamento, non passa oltre il centro della pallina né sopra le due estremità, si ammorbidisce quando è molle e il caramello in più lo riprendono soprattutto la pallina e la goccia.
- L’ombra del filo disegnata a pezzi con le punte tonde si sovrapponeva e faceva una fila di puntini: ombre, riflessi e venature sono tratti interi o pezzi con le punte dritte.
- La parola che cadeva dall’alto dentro una scatola tagliata mostrava mezze lettere, e una trascinata veloce su tre tacche le accavallava: ora le lettere si sciolgono e risalgono dalla riga, e un cambio che arriva durante l’altro salta la goccia.
- Il cerchio di fuoco compariva anche col mouse, perché il clic dà il fuoco al campo da script: appare solo se l’ultimo gesto è stato un tasto.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
