La valutazione a stelle

Valutazioni, SVG, HoverGSAPMediaPeso compresso: Demo 5,7 KBGSAP 28 KBGratisScarica lo zip

Cinque stelle per rispondere a una domanda: l’oro le riempie come un liquido che corre dietro al puntatore, col bordo che si increspa mentre si muove; scelte, le stelle girano al loro posto una dopo l’altra, un riflesso le attraversa e la parola sotto cambia.

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 star rating</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the rating: five stars over five real radio buttons. The gold fills them like a liquid that runs after the
         pointer, its edge rippling while it moves; picked, the stars spin into place one after the other, a glint
         runs across them and the word under them changes. The stars are drawn by the script -->
    <form class="rate" data-rate onsubmit="return false">
      <p class="rate__ask" id="rate-ask">How was your stay?</p>
      <fieldset class="rate__stars" aria-labelledby="rate-ask" data-stars data-autoclic>
        <svg class="rate__art" aria-hidden="true" data-art>
          <defs>
            <linearGradient id="gold" x1="0" y1="0" x2="0" y2="1" data-gold>
              <stop offset="0" stop-color="#ffc83d"/>
              <stop offset="1" stop-color="#ff9a1f"/>
            </linearGradient>
            <clipPath id="level"><path data-level/></clipPath>
            <clipPath id="glint-clip"><path data-glint-clip/></clipPath>
          </defs>
          <g class="rate__empty" data-empty></g>
          <g class="rate__full" clip-path="url(#level)" data-full></g>
          <g clip-path="url(#glint-clip)"><rect class="rate__glint" data-glint/></g>
        </svg>
        <div class="rate__choices" data-choices></div>
      </fieldset>
      <p class="rate__word" aria-hidden="true"><span data-word>Tap a star</span></p>
      <p class="rate__thanks" role="status" aria-live="polite" data-thanks></p>
    </form>
  </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.

16 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 «La valutazione a stelle» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la domanda How was your stay?, cinque stelle vuote dal contorno chiaro e sotto, in corsivo grigio, Tap a star. Aprendo la pagina le stelle spuntano girando una dopo l’altra. Passando sopra col puntatore l’oro le riempie fino alla stella indicata come un liquido: corre su una molla, il suo bordo si increspa mentre si muove e torna dritto quando si ferma, nello spazio fra due stelle; la stella sotto il puntatore si ingrandisce, le vicine un poco, e sotto si legge la parola di quel numero: Terrible, Not great, Okay, Good, Wonderful. Uscendo, l’oro torna alla scelta fatta. Scegliendo, le stelle prese girano al loro posto una dopo l’altra, l’ultima con un sobbalzo, un riflesso bianco corre sull’oro e sotto compare Thanks, that helps other guests.; con una o due stelle l’oro si fa più rosso. Col dito si può scorrere sulle stelle e la scelta cade dove il dito si alza.

Come funziona

Stelle sopra a dei radio veri

Sotto le stelle ci sono cinque input radio, trasparenti, uno sopra ogni stella: la tastiera (le frecce cambiano la scelta), gli screen reader e i moduli funzionano come sempre, e un clic su una stella è un clic sul suo radio. Le stelle sono un SVG disegnato dallo script: cinque vuote e, sopra, cinque d’oro.

Il liquido

Le stelle d’oro sono ritagliate da un clipPath che arriva fino al livello: attraversa una stella e salta lo spazio fino alla successiva. Il livello va verso il numero indicato con una molla (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi, e il bordo del ritaglio ondeggia di WAVE pixel per la sua velocità: fermo, è dritto.

La stella che cresce

La stella sotto il puntatore va a 1,16 di grandezza e le vicine a 1,05, con elastic.out, intorno al loro centro (transformOrigin dato da GSAP, che sugli SVG lo calcola sul riquadro di ogni stella). Uscendo tornano a 1 e il livello torna alla scelta fatta.

La scelta

Scegliendo, ogni stella presa gira da −72 gradi (un quinto di giro: la stella torna uguale a sé) e cresce da 0,7, una ogni 0,06 secondi; l’ultima fa un sobbalzo fino a POP. Un rettangolo inclinato, ritagliato sulle sole stelle prese, passa sopra come un riflesso, e i due colori del gradiente cambiano col numero.

Il dito e l’anteprima

Col dito si scorre sulle stelle (touch-action: none) e la scelta cade dove il dito si alza; un tocco solo passa dal radio. Un clic da script sulle stelle (detail 0, l’anteprima della libreria) fa da mano finta: le passa tutte e ne sceglie tre, quattro o cinque.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABELS`	script.js	`['Terrible', 'Not great', 'Okay', 'Good', 'Wonderful']`	La parola per ogni numero di stelle (e quante sono le stelle).
`START`	script.js	`0`	Le stelle scelte all’apertura della pagina (0 = nessuna).
`SPRING`	script.js	`[170, 0.78]`	La molla del liquido: quanto è rigida e quanto è frenata.
`WAVE`	script.js	`3.2`	Quanto si increspa il bordo del liquido mentre si muove, in pixel.
`POP`	script.js	`1.3`	Quanto si ingrandisce la stella scelta.

Provali nel Playground

Quando usarla

Per le recensioni di una struttura o di un ristorante, il giudizio su un prodotto o un corso, le domande di un sondaggio: ovunque si chiede un voto da uno a cinque.

Sul telefono

Le stelle si stringono con lo schermo. Col dito si scorre sulle stelle per scegliere, senza far scorrere la pagina, e la scelta cade dove il dito si alza; un tocco sceglie subito.

Con il movimento ridotto

L’oro arriva subito alla stella indicata senza correre né incresparsi, le stelle non crescono e non girano, niente riflesso: cambiano solo l’oro e la parola.

Trappole

Cinque pulsanti fatti a mano andrebbero rifatti per la tastiera e per gli screen reader: con dei radio veri sotto le stelle, frecce, moduli e lettura funzionano da soli.
Il bordo del liquido va fermato fra due stelle, non dentro: per questo il livello salta lo spazio (larghezza di una stella più lo spazio) e a riposo il bordo cade proprio nel vuoto.
Sugli SVG l’origine delle trasformazioni va data a GSAP (transformOrigin), che la calcola sul riquadro di ogni stella: un transform-origin nel CSS si sommerebbe al suo e le stelle girerebbero intorno a un altro punto.
Il riflesso deve passare solo sull’oro: è ritagliato da un clipPath fatto delle sole stelle scelte, ricostruito a ogni scelta.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,7 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.