Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
La valutazione a forme
Cinque forme al posto delle stelle, da un riccio di punte per il voto peggiore a un fiore per il migliore: la forma colorata corre a quella indicata e si trasforma per strada, col contorno fatto di molle che si allunga e trema, stampata in tre strati come una risografia che in corsa vanno fuori registro. Scelta, ogni forma risponde a modo suo: il fiore si chiude in un bocciolo e risboccia, il riccio si arruffa e trema.
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 shape rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/recursive@5.3.0/casl.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the rating: five shapes from a spiky burst to a flower, over five real radio buttons. The coloured shape runs
to the one pointed at and turns into it on the way, its three printed layers a little out of step; picked,
it opens out for a good mark and flinches for a bad one. The shapes are drawn by the script -->
<form class="mood" data-mood onsubmit="return false">
<p class="mood__ask" id="mood-ask">How was today’s class?</p>
<fieldset class="mood__row" aria-labelledby="mood-ask" data-row data-autoclic>
<svg class="mood__art" aria-hidden="true" data-art>
<g class="mood__marks" data-marks></g>
<g class="mood__shape" data-shape>
<path class="mood__print" data-print/>
<path class="mood__print" data-print/>
<path class="mood__print" data-print/>
</g>
</svg>
<div class="mood__choices" data-choices></div>
</fieldset>
<p class="mood__word" aria-hidden="true"><span data-word>Pick one</span></p>
<p class="mood__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.
25 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 valutazione a forme» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la domanda How was today’s class?, sotto una fila di cinque piccole forme pallide, ognuna una velatura grigia del suo inchiostro, e più sotto, in grigio, Pick one. Le forme vanno dal peggio al meglio: un riccio di undici punte storte, una goccia bitorzoluta che si affloscia verso il basso, un quadrato dagli angoli morbidi, una nuvola a otto smerli e un fiore a sei petali. Aprendo la pagina spuntano una dopo l’altra con un rimbalzo. Passando sopra col puntatore, dalla forma pallida ne cresce una colorata, grande il doppio, che corre a quella indicata su una molla e si sporge un poco verso il puntatore; per strada si trasforma, si allunga nel verso della corsa e, arrivata, trema prima di fermarsi. È stampata in tre strati dello stesso inchiostro, il più chiaro sotto e due più scuri sopra, che si moltiplicano dove si sovrappongono: in corsa gli strati scuri restano indietro e vanno fuori registro, ognuno con la forma e il colore del punto in cui si trova. L’inchiostro va dal viola del riccio al blu, al verde acqua, al verde e all’arancio del fiore. Le forme pallide si fanno piccole al suo passaggio e tornano su con un rimbalzo. Sotto si legge la parola di quella scelta, Rough, Not great, Fine, Good o Loved it, nel colore della forma: dritta e pesante per i voti bassi, più morbida e pennellata per quelli alti. Uscendo, la forma torna alla scelta fatta, o si richiude in una forma pallida se non c’è ancora. Scegliendo, ogni forma risponde a modo suo: il fiore si chiude in un bocciolo tondo e risboccia coi petali che girano e saltano, la nuvola si gonfia, il quadrato fa un quarto di giro e scatta al suo posto, la goccia si affloscia e cade un poco, il riccio si arruffa e trema. Sotto compare Thanks, your teacher will see this., e a ogni cambio di idea Changed to seguito dalla scelta nuova. Col dito si può scorrere sulle forme e la scelta cade dove il dito si alza.
Come funziona
Forme sopra a dei radio veri
Sotto le forme ci sono dei radio veri, trasparenti, uno per colonna: le frecce cambiano la scelta, Tab entra e esce dal gruppo, gli screen reader leggono la domanda (l’aria-labelledby del fieldset) e la parola di ogni scelta (aria-label), e il modulo manda il valore. Il disegno è un SVG che lo script ridisegna, e la frase sotto, in un role="status", dice la scelta fatta.
Cinque forme come raggi
Ogni forma è un raggio per ogni direzione, da 0,6 a 1: il riccio è un coseno di 11 giri elevato a 2,2 (punte strette, valli larghe) con un’irregolarità di 3 giri, la goccia una somma di coseni più bassa in cima, il quadrato una superellisse di grado 4, la nuvola |cos 4a| elevato a 0,6, il fiore |cos 3a| elevato a 0,7. Sono calcolate una volta in 132 direzioni per ognuna delle tre stampe (più piccola e girata di mezzo lobo quella di mezzo); fra due forme il raggio si mescola con uno smoothstep, così ogni punto della fila ha la sua forma.
Un contorno di molle
Ognuno dei 132 punti del contorno è una molla lungo il suo raggio verso il raggio che la forma chiede (JELLY), e tira i due vicini con la differenza fra i loro errori, così un’onda corre lungo il bordo. Le molle si calcolano sul ticker di GSAP a passi di 1/240 di secondo; la forma si allunga nel verso della corsa di STRETCH per la sua velocità, e quando si ferma le molle la fanno tremare. Quando niente si muove più, il ticker si toglie e non si ridisegna niente.
Tre stampe fuori registro
Le tre stampe corrono su tre molle via via più morbide (LAG): ognuna prende la forma e l’inchiostro del punto della fila in cui si trova lei, così in corsa le stampe scure restano indietro con la forma di prima. La prima è piena, le altre due sono in mix-blend-mode multiply dentro un gruppo isolato: dove si sovrappongono l’inchiostro si fa più fondo, come nella risografia. Gli inchiostri si mescolano in OKLCh, luce, saturazione e tinta per conto loro, e la tinta per la strada più corta.
La risposta a ogni voto
Scegliendo, una timeline di GSAP per ogni stampa, sfasate di 45 millesimi, muove quattro parametri del contorno: quanto i lobi escono dal raggio medio (amp), la grandezza, lo schiacciamento e un giro. Il fiore va ad amp 0 (un bocciolo tondo) e torna con elastic.out mentre le molle saltano; la nuvola si gonfia; il quadrato parte girato di un quarto e torna con back.out, uguale a sé; la goccia si schiaccia e scende; il riccio allunga le punte e prende velocità a caso su ogni punto, e trema.
La parola, il dito e l’anteprima
La parola è in Recursive: l’asse CASL va da 0 a 1 e il peso da 760 a 640 col voto, letti dalla stampa di mezzo a ogni fotogramma, e il colore è l’inchiostro della forma con la luce tenuta sotto 0,58 perché si legga. Col dito si scorre di lato sulle forme e la scelta cade dove si alza; il clic che può seguire è annullato, così non vince il radio da cui il dito è partito. Un clic da script (detail 0, l’anteprima della libreria) fa da mano finta e sceglie a turno un fiore, una goccia, una nuvola, un riccio e il quadrato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABELS | script.js | ['Rough', 'Not great', 'Fine', 'Good', 'Loved it'] | La parola per ogni scelta, dalla peggiore alla migliore (e quante sono le scelte: le forme si spartiscono la strada dal riccio al fiore). |
START | script.js | 0 | La scelta all’apertura della pagina (0 = nessuna). |
MOVE | script.js | [230, 0.62] | La molla che porta la forma: quanto è rigida e quanto è frenata. |
LAG | script.js | 0.3 | Quanto restano indietro le due stampe scure rispetto a quella chiara (0 = tutte insieme). |
JELLY | script.js | [700, 0.2] | Le molle del contorno: quanto sono rigide e quanto sono frenate (meno frenate, tremano più a lungo). |
STRETCH | script.js | 0.0008 | Quanto si allunga la forma con la sua velocità. |
PULL | script.js | 0.3 | Quanto la forma si sporge dal suo posto verso il puntatore (0 = niente, 1 = lo segue). |
BLOOM | script.js | 1 | Quanto è forte la risposta a una scelta: il fiore che si chiude e risboccia, il riccio che si arruffa, la goccia che si affloscia. |
Quando usarla
Per chiedere com’è andata una lezione, un corso, un laboratorio, un appuntamento o una consegna, per il diario dell’umore di un’app di benessere, per la domanda a fine sessione: ovunque si chiede un voto da uno a cinque ma le stelle sarebbero troppo fredde, o troppo simili a una recensione.
Sul telefono
La fila è larga 310 pixel, 62 per scelta, e si stringe con lo schermo se le scelte sono di più. Col dito si scorre di lato sulle forme e la scelta cade dove il dito si alza; in su e in giù la pagina scorre ancora (touch-action: pan-y). Un tocco sceglie subito.
Con il movimento ridotto
Niente corsa e niente molle: la forma è subito al suo posto, con la sua forma e il suo colore, e le stampe stanno a registro. Scegliendo compare in dissolvenza; la parola cambia in dissolvenza senza salire né sfocarsi, e le forme pallide non si spostano.
Trappole
- Mescolare il verde e l’arancio in linea retta, anche in OKLab, dava a metà strada un color oliva spento: mescolando luce, saturazione e tinta per conto loro (OKLCh, la tinta per la strada più corta) si passa per un giallo pulito.
- Le stampe in multiply moltiplicavano anche la forma pallida che sta sotto, che si vedeva come una macchia scura dentro la forma colorata: le stampe stanno in un gruppo con isolation: isolate e la prima è piena e normale, così copre le forme pallide.
- Le stampe scure, cresciute insieme a quella chiara, facevano un puntino colorato in mezzo alla forma pallida nel primo istante: ora entrano solo quando la chiara è cresciuta di un quarto.
- Le forme pallide che fanno spazio alla forma che passa, rimpicciolite fino a sparire, diventavano dei puntini accanto a lei: ora si fermano a metà della loro misura, che sotto la forma non si vede.
- Scorrendo col dito, il dito parte sempre da un radio: se dopo la scorsa arrivava un clic, vinceva quel radio invece della scelta fatta scorrendo. Il clic che segue una scorsa è annullato (preventDefault su un radio rimette lo stato di prima), e un pulsante del mouse premuto sulle forme e lasciato fuori non sceglie niente.
- Con BLOOM sopra 1 il bocciolo portava i lobi del fiore oltre il raggio medio e i petali si rovesciavano verso l’interno: amp non scende sotto 0.
- La parola nell’inchiostro della forma, così com’è, col verde e l’arancio non si leggeva sul bianco: la luce dell’inchiostro è tenuta sotto 0,58 in OKLab, senza toccare la tinta.
Librerie
GSAP 3.15.0, Recursive (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
