Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il cursore del peperoncino
Il livello di piccante di un ordine scelto su un peperoncino: tirato dalla punta si allunga, matura dal verde al rosso scuro, poi suda, prende fuoco e trema. Il corpo è una gelatina di pesi e molle che si gonfia e si stira, e la cifra diventa più grassa e più larga col piccante.
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 chili heat slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- how hot a taqueria makes your order, chosen on a chili pepper: the stalk is held at the left end and the
pepper itself is the slider's fill. Pulled out it grows longer, ripens from green to red, starts sweating and
at the top catches fire. The pepper, the flames, the sweat and the rail are drawn by the script on the canvas;
the grip only carries the keyboard's ring -->
<div class="heat" data-heat>
<div class="heat__head">
<span class="heat__label" id="heat-label">Spice level</span>
<span class="heat__value" aria-hidden="true"><span class="heat__number" data-number>3</span><span class="heat__of" data-of>/10</span></span>
</div>
<div class="heat__track" role="slider" tabindex="0" aria-labelledby="heat-label" aria-orientation="horizontal" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" aria-valuetext="Mild, 3 of 10" data-track data-autoclic>
<canvas class="heat__canvas" aria-hidden="true" data-canvas></canvas>
<span class="heat__grip" aria-hidden="true" data-grip></span>
</div>
<!-- the three words of the scale: each one sits in the middle of its heats, and a press on it goes there -->
<div class="heat__scale" aria-hidden="true" data-scale>
<span class="heat__word" data-word>Mild</span>
<span class="heat__word" data-word>Hot</span>
<span class="heat__word heat__word--top" data-word>Diablo</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
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 peperoncino» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Spice level e a destra la cifra del piccante, 3 su 10, verde. Sotto, su un binario color sabbia, un peperoncino verde e lucido col suo picciolo arricciato e il cappuccio a lobi, fermo a sinistra: la sua punta è la manopola. Sotto il binario dieci tacche, quelle raggiunte del colore del peperoncino, e le tre parole Mild, Hot e Diablo, con quella scelta in nero e più larga. Aprendo la pagina il peperoncino spunta piccolo dal picciolo e si allunga fino al 3, gonfiandosi un poco a ogni tacca. Tirandolo dalla punta (o premendo sul binario, dove la punta corre) si allunga e si assottiglia, mentre il colore passa dal verde al giallo, all’arancio, al rosso e a un rosso scuro, e la punta si piega in su. Tirato in fretta si stira vicino alla mano e si gonfia vicino al picciolo, e il rigonfiamento corre lungo il peperoncino e torna indietro; il corpo si incurva con la velocità e oscilla quando si ferma. Lasciato, la punta va alla tacca più vicina con un piccolo rimbalzo. Dal 4 il peperoncino suda: gocce azzurre si gonfiano sulla buccia, ci scivolano intorno e cadono. Dal 6 prende fuoco dalla punta all’indietro: lingue di fiamma rosse, arancio e gialle che guizzano, si piegano contro il verso in cui si muove e lanciano fiammelle che salgono e si spengono; più è piccante, più il fuoco è alto e lungo. Dall’8 trema e il sudore schizza via. La cifra in alto diventa più grassa, più larga e più scura col piccante, fino a un 10 color sangue. Tornando giù il fuoco si abbassa piano e le ultime gocce finiscono di cadere.
Come funziona
Una gelatina di pesi
Il peperoncino è una fila di 17 pesi lungo il binario: il primo è fermo sotto il cappuccio, l’ultimo è la punta, e ognuno è legato ai vicini da una molla con la rigidità e lo smorzamento di JELLY. Lo spessore in ogni punto viene da quanto i pesi lì sono vicini: stretti fra i vicini il corpo si gonfia, stirati si assottiglia. Così una tirata veloce lo stira vicino alla mano e lo gonfia vicino al picciolo, e il rigonfiamento corre avanti e indietro finché si spegne.
La punta e la mano
Mentre la si tiene la punta va dove va la mano, oltre i due capi solo un poco e sempre meno. Lasciata, la porta alla tacca più vicina la molla di SPRING, poco frenata, che oltrepassa e torna. Le molle si calcolano sul ticker di GSAP a passi di 1/240 di secondo, e quando tutto è fermo il disegno si ferma.
Il disegno
A ogni fotogramma lo script ridisegna il peperoncino sul canvas: la spina dei pesi, incurvata e con la punta piegata in su tanto più quanto è piccante, e il contorno a distanza dello spessore, chiuso con curve morbide. Il colore matura lungo cinque tinte di :root e la punta è sempre un poco più matura del resto; sopra, un’ombra che lo fa rotondo, una piega e il riflesso bagnato.
Il sudore
Da SWEAT_FROM nascono gocce sulla buccia, attaccate a un punto del peperoncino: si gonfiano, poi scivolano intorno al corpo sempre più in fretta e dal fondo cadono con la gravità, allungate nel verso in cui vanno. Da SHAKE_FROM schizzano anche via dall’alto, e tutto il peperoncino trema su due onde veloci che non coincidono mai.
Il fuoco
Da FIRE_FROM le lingue di fiamma stanno ogni 16 pixel contate dalla punta, così restano al loro posto quando il peperoncino cresce. Ognuna ha un’altezza che guizza su due onde sue e si piega contro la velocità; tre strati sulle stesse lingue, rosso, arancio e giallo, disegnati dietro il peperoncino, che ne copre i piedi. Il fuoco sale in fretta e scende piano, e dalle punte si staccano fiammelle che salgono e si spengono.
La cifra, i tasti e l’anteprima
La cifra in alto si sposta sugli assi del peso e della larghezza di Anybody col piccante. Le frecce muovono di KEYS[0], con Maiuscolo o coi tasti Pagina di KEYS[1], Inizio e Fine vanno ai capi, e una parola sotto porta al centro delle sue tacche. Un clic da script (detail 0, quello dell’anteprima) fa da mano finta: dal mite tira il peperoncino fino in fondo, dal piccante lo riporta a 2.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_AT | script.js | 3 | Il piccante all’apertura della pagina. |
LEVELS | script.js | 10 | Quante tacche di piccante ci sono, da 1. |
ZONES | script.js | [3, 7] | L’ultima tacca della prima parola (Mild) e l’ultima della seconda (Hot). |
SWEAT_FROM | script.js | 4 | Da questa tacca il peperoncino suda. |
FIRE_FROM | script.js | 6 | Da questa tacca prende fuoco. |
SHAKE_FROM | script.js | 8 | Da questa tacca trema e il sudore schizza via. |
FLAMES | script.js | 56 | Quanto sono alte le fiamme alla tacca più alta, in pixel. |
SPRING | script.js | [520, 0.3] | La molla che porta la punta quando nessuno la tiene: quanto è rigida e quanto è frenata. |
JELLY | script.js | [2600, 7] | Le molle dentro il peperoncino: quanto sono rigide (più veloce corre il rigonfiamento) e quanto sono frenate. |
KEYS | script.js | [1, 3] | Di quanto sposta il piccante una freccia, e con Maiuscolo o coi tasti Pagina. |
Quando usarla
Per il piccante di un piatto in un ristorante o in un’app di consegne, la forza di una salsa nel negozio online, o qualunque scelta da mite a estrema dove il valore deve far ridere e far venire un po’ di paura.
Sul telefono
Il cursore prende la larghezza dello schermo meno un margine, e il peperoncino più lungo arriva in fondo al binario. Col dito si trascina di lato mentre la pagina scorre ancora in su e in giù (touch-action: pan-y); un tocco sul binario porta lì la punta. Fuoco, sudore e molle sono gli stessi.
Con il movimento ridotto
Niente molle, niente entrata, niente tremito: la punta è subito dove la si porta. Il colore e la cifra cambiano lo stesso, e da 4 in su il peperoncino ha qualche goccia ferma sulla buccia e da 6 un fuoco fermo, disegnato una volta sola.
Trappole
- Coi tasti la punta scivola verso la tacca nuova: se la cifra seguisse la punta, una seconda pressione veloce partirebbe dalla tacca di passaggio e andrebbe persa. Finché la punta non arriva, conta la tacca scelta.
- Un tocco veloce lontano dalla punta finiva prima che la punta arrivasse, e il valore restava quello vecchio: lasciando, il valore viene da dove era la mano, non da dove era arrivata la punta.
- Le fiamme vicino alla punta, dove il peperoncino è sottilissimo, mostravano il loro piede tondo sotto la buccia: la base di ogni lingua è larga al più due volte e mezzo lo spessore lì, e le lingue partono a 22 pixel dalla punta.
- Le fiamme più alte uscivano dal canvas e si tagliavano dritte: ogni lingua si ferma a 6 pixel dal bordo in alto.
- Le lingue contate da un capo all’altro del fuoco cambiavano posto e guizzo a ogni pixel di crescita: contate dalla punta restano dove sono.
- Con la gelatina troppo libera una pressione dei tasti faceva un bulbo enorme vicino al picciolo: lo spessore da gelatina resta fra 0,78 e 1,3 volte quello a riposo.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
