Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
La valutazione coi calici
Il voto a un vino si dà con cinque calici: passando sopra, il calice indicato e quelli prima si riempiono uno dopo l’altro, e il vino dentro oscilla davvero, sui movimenti del bicchiere. Col voto pieno i calici arrivano all’orlo e il vino trabocca a gocce. Scelto il voto, i calici pieni si alzano e brindano: si piegano l’uno verso l’altro, si toccano dove le coppe si incontrano davvero, con una scintilla d’oro, e il colpo fa ondeggiare il vino.
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 wine glass rating</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cormorant@5.3.0/wght.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cormorant@5.3.0/wght-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a tasting note given with wine glasses: the glass under the pointer and the ones before it are poured, and the
wine in them sloshes for real, on the glasses' own movement; the top rating pours them to the brim and they
spill. Picked, the full glasses are raised and brought together for a toast: they clink, bounce apart and the
wine swings. Under the glasses there are five real radio buttons; the glasses are drawn by the script -->
<form class="taste" data-taste onsubmit="return false">
<p class="taste__ask" id="taste-ask">How was the 2019 Nebbiolo?</p>
<fieldset class="taste__row" aria-labelledby="taste-ask" data-row data-autoclic>
<svg class="taste__art" aria-hidden="true" data-art>
<defs>
<linearGradient id="taste-wine" x1="0" y1="-98" x2="0" y2="-38" gradientUnits="userSpaceOnUse">
<stop class="taste__stop-wine" offset="0"/>
<stop class="taste__stop-deep" offset="1"/>
</linearGradient>
<linearGradient id="taste-tint" x1="0" y1="0" x2="1" y2="0">
<stop class="taste__stop-tint" offset="0"/>
<stop class="taste__stop-clear" offset="0.45"/>
<stop class="taste__stop-tint" offset="1"/>
</linearGradient>
<clipPath id="taste-inside"><path data-inside/></clipPath>
</defs>
<g data-shadows></g>
<g data-glasses></g>
<g data-drops></g>
<g data-sparks></g>
</svg>
<div class="taste__choices" data-choices></div>
</fieldset>
<p class="taste__word" aria-hidden="true"><span data-word>Choose a glass</span></p>
<p class="taste__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.
26 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 coi calici» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la domanda How was the 2019 Nebbiolo?, in un carattere con le grazie; sotto, cinque calici da vino rossi vuoti, di vetro chiaro col bordo grigio freddo, una luce lunga sulla sinistra della coppa e l’ombra sul tavolo; più sotto, in corsivo grigio, Choose a glass. Passando sopra col puntatore, il calice indicato e quelli prima si riempiono da sinistra, uno dopo l’altro: il vino rosso Nebbiolo sale nella coppa con un piccolo rimbalzo, la superficie si vede appena dall’alto come un’ellisse più chiara, e la colata la fa ondeggiare. Il calice sotto il puntatore si solleva appena e si piega verso di lui: il vino resta in piano e oscilla, come in un bicchiere vero. Sotto si legge la parola del voto, Not for me, Simple, Pleasant, Elegant o Unforgettable, in corsivo, più nera quanto più alto è il voto. Col voto più alto i calici si riempiono fino all’orlo: il vino che oscilla oltre il bordo trabocca in gocce che volano fuori, cadono e spariscono prima del tavolo. Uscendo, i calici tornano al voto scelto, o si vuotano se non c’è ancora. Scegliendo, i calici pieni vengono sollevati e portati l’uno verso l’altro, piegati verso il centro, sempre più veloci finché le coppe si toccano: lì scoccano tre piccoli raggi d’oro, i calici rimbalzano appena, restano vicini un attimo e tornano giù al loro posto; il colpo e la frenata fanno ondeggiare il vino, e coi calici pieni fino all’orlo ne fanno uscire qualche goccia. Un calice solo brinda da solo: si alza, si inclina e torna giù. Sotto compare Noted in your cellar book., e a ogni cambio di idea Changed to seguito dal voto nuovo. Col dito si scorre sui calici e il voto cade dove il dito si alza; con la tastiera le frecce versano subito e registrano il voto dopo una breve pausa, Invio lo registra subito.
Come funziona
Cinque calici sopra cinque radio veri
Sopra i calici ci sono cinque radio veri, trasparenti e senza eventi del puntatore, in un fieldset legato alla domanda (aria-labelledby): Tab ci entra, le frecce cambiano il voto, gli screen reader leggono il numero e la parola (aria-label) e il modulo manda il valore. La mano lavora sui calici con gli eventi del puntatore; le frecce versano subito e registrano il voto dopo 0,55 secondi di pausa (un gsap.delayedCall che ogni tasto riparte), Invio e Spazio lo registrano subito.
Il calice disegnato da un profilo
La coppa nasce da una funzione: il mezzo diametro a ogni altezza, un quarto d’ellisse dal fondo fino al punto più largo (BELLY) e poi una curva coseno che rientra verso l’orlo. Da lì vengono il contorno, la luce sul vetro (una linea parallela al bordo), l’interno ritagliato dallo spessore del vetro e usato come clipPath per il vino, e l’orlo come due mezze ellissi, quella dietro più chiara. Ogni calice è un gruppo con translate e rotate intorno al piede, ridisegnato solo quando qualcosa cambia.
Il vino che resta in piano e oscilla
La superficie del vino è la somma dei primi tre modi di sciabordio di una coppa, cos(mπ(ξ+1)/2) sulla larghezza del vino a quell’altezza, ognuno una molla smorzata con la frequenza che cresce come la radice di m (SLOSH). A ogni fotogramma si misura dove è finito il centro del vino e se ne ricava l’accelerazione: quella di lato spinge i modi dispari verso la pendenza a/g (il vino si accumula dalla parte opposta a dove va il bicchiere), quella in su e in giù il modo pari. Nel disegno del calice la superficie si inclina di −tan θ, così resta orizzontale sulla pagina qualunque sia la piega del bicchiere. Le somme girano sul ticker di GSAP a passi di 1/240 di secondo, col fotogramma limitato a 1/30, e quando tutto è fermo il ticker si toglie.
L’orlo e le gocce
Col voto pieno il vino arriva a BRIM, vicino all’orlo. A ogni passo si guarda l’altezza della superficie ai due lati della bocca: quello che supera l’orlo diventa gocce, tante quanto è alto lo sbordo, che partono dall’orlo verso l’esterno con la velocità del bicchiere, cadono con la gravità e svaniscono in mezzo secondo o toccando il tavolo. Sono lacrime disegnate in SVG, appuntite dalla parte da cui vengono. Il vino perso si ripaga da solo: il livello torna verso la sua molla.
Il brindisi dove le coppe si toccano
Per il brindisi ogni calice pieno ha una posa: verso il centro dei calici pieni per TOAST, piegato di TILT gradi per ogni posto di distanza, sollevato di 8 pixel. Prima di partire si cerca la quota della strada a cui due coppe vicine si toccano davvero: i punti del contorno di una si portano nel disegno dell’altra e si guarda se cadono dentro il suo profilo. Una timeline di GSAP porta i calici fin lì accelerando (power2.in), scocca la scintilla nel punto di contatto, li fa rimbalzare indietro di un decimo, li tiene vicini e li riporta giù. Il vino non sa niente della timeline: oscilla solo perché il bicchiere frena di colpo.
Dito, tastiera, anteprima
Col dito si scorre di lato sui calici (touch-action: pan-y) e il voto cade dove il dito si alza; un pulsante del mouse lasciato fuori dai calici non sceglie niente. Il calice sotto il puntatore è tenuto da una molla morbida che lo solleva di 2,5 pixel e lo piega fino a 3 gradi verso il puntatore, e la mano lo lascia quando parte il brindisi. Un clic da script (detail 0, l’anteprima della libreria) fa da mano finta: scorre fino al voto e sceglie a turno Unforgettable, Pleasant, Elegant e Simple.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABELS | script.js | ['Not for me', 'Simple', 'Pleasant', 'Elegant', 'Unforgettable'] | La parola per ogni voto, dal più basso al più alto (e quanti calici: da 2 a 6). |
START | script.js | 0 | Il voto scelto all’apertura della pagina (0 = calici vuoti). |
POUR | script.js | 0.4 | Quanto vino si versa in un calice, dal fondo della coppa (0) all’orlo (1). |
BRIM | script.js | 0.92 | Fin dove si versa col voto più alto: così vicino all’orlo che il vino trabocca. |
SLOSH | script.js | [2.6, 0.055] | Lo sciabordio del vino: quante volte al secondo oscilla e quanto in fretta si calma. |
TOAST | script.js | 0.62 | Quanto si avvicinano i calici per il brindisi (con troppo poco le coppe non si toccano più e il brindisi resta senza scintilla). |
TILT | script.js | 8 | Quanto si piegano i calici verso il centro nel brindisi, in gradi per ogni posto di distanza. |
STAGGER | script.js | 0.07 | Il tempo fra un calice e il successivo quando si versano o si vuotano, in secondi. |
Quando usarla
Per il voto a un vino nell’app di una cantina o di un’enoteca, per le note di degustazione di un club del vino, per la recensione di una bottiglia comprata online, per chiedere com’è andata una cena o una serata in un wine bar: ovunque il voto parla di bere e di festeggiare, e le stelle sarebbero anonime.
Sul telefono
I calici si stringono con lo schermo: 358 pixel a 390. Col dito si scorre di lato sui calici e il voto cade dove il dito si alza; in su e in giù la pagina scorre ancora (touch-action: pan-y). Un tocco sceglie subito e fa partire il brindisi.
Con il movimento ridotto
Niente oscillazioni, niente gocce e niente brindisi: il vino compare in dissolvenza già al suo livello e sparisce allo stesso modo, i calici restano fermi sul tavolo; la parola e il ringraziamento cambiano in dissolvenza.
Trappole
- La prima entrata dei calici era un tween di GSAP su y: GSAP scrive il transform del gruppo SVG e alla fine clearProps lo cancellava, così tutti e cinque i calici finivano uno sopra l’altro al centro. Ora l’entrata è la molla della mano: i calici partono 7 pixel più in alto e si posano.
- Col primo brindisi le coppe si toccavano per un solo fotogramma e rimbalzavano di quasi un terzo della strada: nelle foto sembravano non incontrarsi mai. Ora rimbalzano di un decimo e restano vicine un attimo, e il tocco si vede.
- Il punto della scintilla era fisso, a metà fra due calici e all’altezza del ventre della coppa, e coi calici piegati cadeva dentro il vetro. Ora è il punto del contorno che entra per primo nell’altro calice, preso dalla stessa ricerca che trova il contatto.
- Col voto pieno il brindisi faceva uscire sessanta gocce che cadevano fra i calici e anche fuori dal riquadro: ora lo sbordo ne fa poche, lente, che spariscono in mezzo secondo, toccando il tavolo o arrivando al bordo del riquadro.
- Un calice solo che brinda da solo, piegato di 8 gradi e in più tenuto dal puntatore, sembrava cadere: il puntatore lascia il calice quando parte il brindisi e il calice da solo si piega di poco.
- Lasciare i calici col puntatore subito dopo il clic annullava il brindisi in attesa: l’uscita ora rimette solo il voto scelto e il brindisi parte comunque.
- Con TOAST basso le coppe non si toccano mai: la ricerca del contatto lo dice e il brindisi resta senza scintilla, invece di farla scoccare nel vuoto.
Librerie
GSAP 3.15.0, Cormorant (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
