Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il selettore di colore
Una tazza con sei colori sotto: scegliendone uno, la vernice nuova sale dentro la tazza dal fondo con un’onda che rotola, il manico la prende quando l’onda ci arriva, la tazza ondeggia e un anello scivola sul campione scelto; intanto dalla tazza sale il vapore.
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 colour picker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the picker: a mug and six colours under it, over six real radio buttons. Choosing a colour, the new paint
rises inside the mug from the bottom with a rolling wave, the handle takes it when the wave gets there, the
mug sways, and a ring slides to the swatch chosen. Steam keeps rising from the cup -->
<form class="pick" data-pick onsubmit="return false">
<svg class="pick__mug" viewBox="0 0 260 240" aria-hidden="true" data-mug>
<defs>
<clipPath id="mug-body"><path d="M60 62 L68 188 Q70 205 87 205 L163 205 Q180 205 182 188 L190 62 Z"/></clipPath>
<linearGradient id="mug-gloss" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="0.5" stop-color="#fff" stop-opacity="0.34"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="mug-shade" x1="0" y1="0" x2="1" y2="0">
<stop offset="0.55" stop-color="#000" stop-opacity="0"/>
<stop offset="1" stop-color="#000" stop-opacity="0.18"/>
</linearGradient>
<filter id="mug-soft" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="4"/></filter>
</defs>
<ellipse class="pick__shadow" cx="126" cy="214" rx="80" ry="9" filter="url(#mug-soft)"/>
<g class="pick__steam" data-steam>
<path d="M108 50c-7-9 7-15 0-24s7-15 0-22"/>
<path d="M126 46c-7-9 7-15 0-24s7-15 0-22"/>
<path d="M144 50c-7-9 7-15 0-24s7-15 0-22"/>
</g>
<path class="pick__handle" d="M186 88 C238 84 244 172 184 168 L182 148 C218 152 218 102 186 108 Z" data-handle/>
<g clip-path="url(#mug-body)">
<rect x="50" y="50" width="150" height="170" data-body/>
<path data-paint/>
<rect x="50" y="50" width="150" height="170" fill="url(#mug-shade)"/>
<rect x="74" y="66" width="18" height="128" rx="9" fill="url(#mug-gloss)"/>
</g>
<ellipse cx="125" cy="62" rx="65" ry="13" data-rim/>
<ellipse cx="125" cy="64" rx="56" ry="9.5" class="pick__coffee"/>
<ellipse cx="125" cy="62" rx="64" ry="12.4" class="pick__lip"/>
</svg>
<fieldset class="pick__swatches" data-swatches data-autoclic>
<legend class="pick__legend">Colour</legend>
<span class="pick__ring" aria-hidden="true" data-ring></span>
</fieldset>
<p class="pick__name" aria-hidden="true"><span data-name></span></p>
<p class="pick__note" data-note></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.
28 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 selettore di colore» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una tazza di ceramica verde salvia, piena di caffè, con un’ombra sotto e tre fili di vapore che salgono, si disegnano e svaniscono uno dopo l’altro; sotto, sei campioni quadrati coi bordi tondi (Sage, Terracotta, Ink, Butter, Sky e Plum), quello scelto più piccolo dentro un anello nero, e sotto ancora il nome del colore e una riga che lo descrive. Scegliendo un altro colore l’anello scivola sul nuovo campione, che si stringe con un rimbalzo, e dentro la tazza la vernice nuova sale dal fondo: il suo bordo è un’onda ferma all’inizio, che rotola a metà e si spiana alla fine; il manico prende il colore quando l’onda ci arriva, l’orlo per ultimo, e la tazza ondeggia un poco. Il nome rotola via verso l’alto e arriva quello nuovo dal basso, e la riga sotto cambia.
Come funziona
Una tazza in SVG
La tazza è disegnata a mano in SVG: il corpo, ritagliato da un clipPath con la sua forma, il manico, l’orlo, il caffè e una luce chiara di lato. Il colore del corpo è un rettangolo pieno dentro il ritaglio; sopra di lui, nello stesso ritaglio, sale la vernice nuova.
La vernice che sale
La vernice è un path che va dal fondo fino a un bordo ondulato: lo script lo ridisegna a ogni fotogramma con altezza = livello + WAVE[0] · sin(x · WAVE[1] + fase). Il livello sale in FILL secondi con power2.inOut, la fase scorre e l’altezza dell’onda segue sin(π · avanzamento), così è ferma all’inizio e piatta alla fine; poi il corpo prende il colore e la vernice sparisce.
Manico, orlo e oscillazione
Nella stessa timeline il manico cambia colore quando l’onda arriva alla sua altezza (al 42 per cento della salita), l’orlo alla fine col colore in ombra, e la tazza ondeggia di SWAY gradi intorno al suo piede e torna ferma con elastic.out.
Campioni veri
Sotto i campioni ci sono sei radio veri: frecce, screen reader e moduli funzionano da soli. Un anello solo scivola sul campione scelto con back.out, e il campione si stringe a 0,74 dentro di lui con un rimbalzo; il nome rotola e la riga sotto cambia in dissolvenza.
Il vapore e l’anteprima
Tre fili di vapore hanno un tratto lungo metà della loro linea che scorre con stroke-dashoffset mentre salgono e svaniscono, in un giro senza fine sfasato fra l’uno e l’altro. Un clic da script sui campioni (l’anteprima della libreria) sceglie il colore dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
COLOURS | script.js | [['Sage', '#9bb38f', 'A soft green, like olive leaves.'], …] | I colori: nome, colore e una riga che lo descrive. |
START | script.js | 0 | Il colore scelto all’apertura della pagina. |
FILL | script.js | 1.1 | I secondi in cui sale il colore nuovo. |
WAVE | script.js | [7, 0.075] | L’onda sopra la vernice: quanto è alta, in pixel, e quanto sono vicine le creste. |
SWAY | script.js | 3 | Quanto ondeggia la tazza mentre si riempie, in gradi. |
Quando usarla
Per la scheda di un prodotto con più colori (tazze, borse, scarpe, sedie), per scegliere il colore di un tema o di un’etichetta: ovunque il colore scelto si deve vedere subito sull’oggetto.
Sul telefono
La tazza si rimpicciolisce con lo schermo e i campioni restano grandi abbastanza per il dito; due tocchi veloci su un campione non ingrandiscono la pagina.
Con il movimento ridotto
La tazza cambia colore di colpo, senza onda e senza ondeggiare, il vapore resta fermo, l’anello e il nome cambiano senza scivolare.
Trappole
- Un colore scelto mentre il precedente sta ancora salendo: la salita in corso finisce di colpo (progress(1)), così quella nuova parte sempre da un colore intero e non da metà tazza.
- Un’onda con la stessa altezza per tutta la salita parte e arriva storta: la sua altezza segue sin(π · avanzamento), ferma in fondo e piatta in cima.
- La vernice sta nello stesso clipPath del corpo, sotto la luce e l’ombra di lato: così anche il colore nuovo ha subito la stessa luce della ceramica.
Librerie
GSAP 3.15.0, Outfit (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,9 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.
