L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
La ruota dei premi
La ruota dei premi di una trattoria: si lancia col dito o col pulsante e poi fa da sola, rallentando per attrito; ogni piolo che passa fa sbattere la linguetta e le toglie un po' di velocità, e se si ferma su un piolo si assesta dentro una fetta. La fetta vinta esce un poco, le altre impallidiscono e volano striscioline di carta.
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 prize wheel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the prize wheel: flicked with a finger or sent round by Spin, it slows down on its own, every peg knocks the
flapper, and where it stops the slice comes out and the paper flies -->
<section class="game" aria-labelledby="game-title" data-game data-autoclic>
<h2 class="game__title" id="game-title">Spin for a treat</h2>
<div class="wheel" data-wheel-box>
<svg class="wheel__disc" viewBox="-100 -100 200 200" role="img" aria-label="The prize wheel" data-wheel></svg>
<svg class="wheel__flap" viewBox="-12 -14 24 44" aria-hidden="true" data-flap>
<path d="M-7-8h14v4c0 7-3.5 15-7 26-3.5-11-7-19-7-26z" fill="#d63b2f"/>
<path d="M-3.6-4v7" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
<rect x="-11" y="-14" width="22" height="8" rx="3" fill="#3a2a22"/>
</svg>
</div>
<button class="spin" type="button" data-spin><span>Spin</span></button>
<div class="result" aria-live="polite" data-result>
<p class="result__say" data-say>Drag the wheel or press Spin</p>
<p class="result__prize" data-prize></p>
</div>
</section>
</main>
<div class="paper" aria-hidden="true" data-paper></div>
<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.
45 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 «La ruota dei premi» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco Spin for a treat, una ruota di legno con otto fette colorate (Coffee, 10% off, Dessert, Try again, Wine, 5% off, Starter, Try again), i pioli dorati sul bordo e in alto una linguetta rossa appesa a una staffa; sotto Spin e una riga che spiega. La ruota si afferra col dito o col mouse e gira con la mano attorno al centro; lasciandola con un colpo continua da sola, e Spin la lancia a una velocità a caso. Gira rallentando, e ogni piolo che passa sotto la linguetta la spinge di lato: la linguetta sbatte, dondola sulla sua molla e frena la ruota di un poco, così alla fine scatta da una fetta all'altra sempre più piano. Se si ferma con un piolo contro la linguetta, la ruota si assesta dentro una fetta. Allora la fetta vinta esce dal centro con un rimbalzo, le altre diventano pallide, sotto compare You won e il premio salta fuori (A free starter) mentre striscioline di carta schizzano dalla linguetta e cadono girando; su Try again la fetta trema e la riga dice So close. Spin again. Un colpo troppo debole fa girare la ruota lo stesso ma non vale: Give it a real spin.
Come funziona
La ruota disegnata
La ruota è un SVG con l'origine al centro: le fette sono spicchi di cerchio, i pioli stanno sui confini, le parole leggono dal centro verso fuori sulla metà destra e dal bordo verso dentro sulla metà sinistra, così non sono mai a testa in giù. Sotto le fette c'è un disco pallido: una fetta spenta impallidisce invece di scurirsi.
La fisica
La ruota ha un angolo e una velocità; ogni secondo perde una frenata fissa più una parte della sua velocità (FRICTION), calcolate sul ticker di GSAP a passi di 4 millisecondi. Il numero del piolo sotto la linguetta è floor((angolo − mezza fetta) / fetta): quando cambia, un piolo è passato (a gran velocità anche più d'uno in un passo).
La linguetta
La linguetta è una molla: ogni piolo le dà una spinta nel verso in cui va la ruota, più forte quanto più la ruota corre, e toglie PEG gradi al secondo alla ruota. Tenuta entro 40 gradi, rimbalza indietro se li tocca. Quando la ruota si ferma con un piolo a meno di 2,5 gradi dalla linguetta, un tween la porta dentro la fetta.
La mano
Afferrata, la ruota segue l'angolo del puntatore attorno al centro (atan2), contando i giri senza salti. Lasciata, prende la velocità dell'ultimo decimo di secondo; una mano ferma prima di lasciare non dà velocità, sotto i 300 gradi al secondo il colpo è troppo debole e non vale.
Il premio, la carta e l'anteprima
La fetta vinta è quella col centro sotto la linguetta: cresce dal centro (svgOrigin 0 0) con back.out, le altre scendono a 0,35 di opacità e il premio salta fuori con elastic.out. La carta sono CONFETTI striscioline con gravità e attrito d'aria che girano e mostrano la faccia (scaleY col coseno) prima di svanire. Un clic da script (l'anteprima della libreria) è una mano finta che lancia la ruota, quando è ferma da un po'.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLICES | script.js | [['Coffee', 'A free coffee', '#e4683f', '#ffffff'], …] | Le fette: la parola sulla ruota, il premio (vuoto: niente premio), il colore e il colore della parola. |
FRICTION | script.js | [45, 0.5] | Come rallenta la ruota: una frenata fissa in gradi al secondo, e una parte della sua velocità ogni secondo. |
PEG | script.js | 6 | I gradi al secondo che ogni piolo toglie alla ruota sbattendo contro la linguetta. |
SPIN | script.js | [900, 1500] | La velocità che dà Spin, a caso fra questi due valori, in gradi al secondo. |
CONFETTI | script.js | 28 | Quante striscioline di carta volano per un premio. |
Quando usarla
Per il sito o la cassa di un ristorante, una promozione di un negozio, un evento, una newsletter con un premio, una festa: qualunque estrazione che deve sembrare una ruota vera.
Sul telefono
La ruota è larga al massimo 340 pixel e sta nello schermo; il dito la afferra e la fa girare senza far scorrere la pagina (touch-action none sulla ruota), e un colpo veloce la lancia.
Con il movimento ridotto
Spin porta la ruota subito su una fetta a caso, dentro di lei, e il premio compare senza salti né carta; la mano fa ancora girare la ruota, ma lasciandola si ferma.
Trappole
- La ruota e la linguetta sono scritte a mano a ogni fotogramma (style.transform): un tween di GSAP sullo stesso elemento litigherebbe con loro, quindi l'entrata ingrandisce la scatola che le contiene.
- La velocità del lancio va presa dall'ultimo decimo di secondo, e una mano che si è fermata prima di lasciare non deve lanciare niente.
- A gran velocità in un passo possono passare più pioli: vanno contati tutti, o la linguetta resta ferma proprio quando la ruota corre.
- Fette spente con l'opacità sopra un fondo scuro diventano fangose: sotto ci vuole un disco chiaro.
- Una ruota ferma esattamente su un piolo non ha vincitore chiaro: va assestata dentro una fetta, come fa la linguetta vera.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 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.
