Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il caleidoscopio della palette
La palette di un’app di design generata da una moodboard come un caleidoscopio: ogni colore letto cade nella camera come un pezzetto di vetro, rotola sugli altri mentre il tamburo gira, e due specchi lo moltiplicano in otto spicchi. Più la camera si riempie, più il motivo si fa ricco; alla fine il tamburo si ferma e i cinque colori scelti escono dall’oculare come campioni.
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, viewport-fit=cover">
<title>The palette kaleidoscope</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the palette generator of a design app: every colour read from the moodboard drops into a kaleidoscope as a
chip of glass, tumbles in the turning chamber and is mirrored into eight slices. When the chamber is full the
drum stops and the five colours it settled on come out as swatches below. The glass is simulated and painted
on the canvas by script.js; the words, the swatches and the button are HTML -->
<section class="pal" aria-labelledby="pal-title" data-pal>
<div class="pal__top">
<div class="pal__scope" role="progressbar" aria-labelledby="pal-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Palette not generated yet" data-scope>
<div class="pal__knurl" aria-hidden="true" data-knurl></div>
<div class="pal__well">
<canvas class="pal__glass" aria-hidden="true" data-glass></canvas>
<span class="pal__lens" aria-hidden="true"></span>
</div>
</div>
<div class="pal__words">
<h2 class="pal__title" id="pal-title">Moodboard · Coastal Dusk</h2>
<p class="pal__big" aria-hidden="true"><span class="pal__swap" data-big>24 images</span></p>
<p class="pal__status">
<span class="pal__swap" data-status>No palette yet</span>
<svg class="pal__tick" viewBox="0 0 20 20" aria-hidden="true" data-tick><path d="M4.6 10.4l3.5 3.5 7.4-8" pathLength="1"/></svg>
</p>
<p class="pal__sub"><span class="pal__swap" data-sub>Edited 2 h ago</span></p>
<button class="pal__btn" type="button" data-action data-autoclic><span class="pal__label" data-label>Generate palette</span></button>
</div>
</div>
<ul class="pal__swatches" aria-label="Generated palette" data-swatches>
<li class="pal__slot"><span class="pal__chip" data-chip></span><span class="pal__hex" data-hex></span></li>
<li class="pal__slot"><span class="pal__chip" data-chip></span><span class="pal__hex" data-hex></span></li>
<li class="pal__slot"><span class="pal__chip" data-chip></span><span class="pal__hex" data-hex></span></li>
<li class="pal__slot"><span class="pal__chip" data-chip></span><span class="pal__hex" data-hex></span></li>
<li class="pal__slot"><span class="pal__chip" data-chip></span><span class="pal__hex" data-hex></span></li>
</ul>
<p class="sr" role="status" aria-live="polite" data-live></p>
</section>
</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.
35 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 caleidoscopio della palette» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un riquadro grafite con gli angoli tondi. A sinistra l’oculare di un caleidoscopio dentro un tamburo d’acciaio zigrinato: dentro, pochi pezzi di vetro trasparente fanno già una stella grigia e lucida. A destra Moodboard · Coastal Dusk, la scritta grande 24 images, No palette yet, Edited 2 h ago e il pulsante chiaro Generate palette; sotto, cinque posti vuoti per i campioni. Premuto, il pulsante diventa Generating… col solo bordo, il tamburo comincia a girare (la zigrinatura scorre) e la cifra grande sale in percentuale mentre la riga sotto dice quante immagini sono state lette. Per ogni parte letta un pezzetto di vetro colorato, in una sfumatura dei cinque colori della moodboard, cade nella camera: nell’oculare compare in mezzo con un lampo e scivola verso il bordo moltiplicato per otto. I pezzi rotolano, si accavallano e mescolano la loro luce dove si coprono; il tamburo trascina il mucchio su per la parete finché non frana, e il disegno cambia di continuo. Più vetro entra, più il motivo si fa fitto. Con l’ultimo pezzo la scritta dice Choosing colours, il tamburo rallenta fino a fermarsi e il vetro si assesta; un riflesso attraversa l’oculare e i cinque colori scelti escono dal centro del caleidoscopio uno dopo l’altro, volano al loro posto girando e si fermano con un rimbalzo, con il codice esadecimale sotto. Accanto a Palette ready si disegna una spunta verde, la scritta grande dice 5 colours e il pulsante diventa Regenerate: i campioni rientrano, il vetro colorato cade fuori dal fondo della camera e parte una palette nuova. Una volta su due, nella demo, a metà strada la moodboard non risponde: il tamburo si ferma con uno strattone, il vetro sobbalza, l’oculare diventa grigio e scuro, la scritta rossa Couldn’t read 3 images dice quante immagini sono state lette e Retry riaccende i colori e riprende da lì.
Come funziona
Un pezzo di vetro è un poligono pieno di cerchi
Ogni pezzo è un poligono convesso irregolare (scheggia a tre lati, quadrilatero, pentagono o listello lungo) centrato sul suo baricentro. Per la fisica porta con sé alcuni cerchi che lo riempiono: uno nel baricentro e altri verso i vertici, ognuno grande quanto la distanza dal lato più vicino. Massa e momento d’inerzia vengono dall’area. Così gli urti fra pezzi diventano urti fra cerchi, semplici e stabili, ma un colpo su un angolo fa girare il pezzo come farebbe un poligono vero.
Gli urti, risolti a impulsi
Tre passi di fisica per fotogramma (al massimo 1/30 di secondo in tutto). A ogni passo si raccolgono i contatti fra cerchi di pezzi diversi e fra cerchi e la parete rotonda; poi dieci giri di impulsi in sequenza: un impulso lungo la normale che non tira mai (accumulato e tenuto sopra zero), con un poco di rimbalzo se l’urto è forte e una piccola spinta che scioglie le compenetrazioni, e un attrito lungo il contatto che non supera FRICTION volte l’impulso normale. Le velocità vengono limitate e un pezzo non può uscire dalla parete.
Il tamburo che gira
La parete della camera non è ferma: nel punto di contatto si muove alla velocità del tamburo, ω × r, e l’attrito la trasmette al vetro. Per questo il mucchio sale lungo la parete finché la pendenza non vince l’attrito e frana, proprio come nel tubo di un caleidoscopio vero. La velocità del tamburo è un tween di GSAP: parte con una curva morbida, si ferma con uno strattone quando qualcosa va storto e rallenta piano quando la palette è pronta. La zigrinatura del tamburo gira dello stesso angolo, mentre la luce sopra resta ferma.
Il vetro: luce che si somma
A ogni fotogramma la camera si disegna una volta su un canvas suo. Ogni pezzo si riempie del suo colore in modalità screen, così dove due pezzi si coprono la luce si somma e il colore schiarisce; sopra, un gradiente lungo la direzione della luce dà lo spessore (chiaro dove la luce entra, scuro dove esce), un bordo più chiaro appena dentro il contorno fa il vetro tagliato spesso, e ogni lato si accende o si scurisce secondo quanto guarda verso la luce.
Gli specchi: spicchi ritagliati e ribaltati
Gli specchi si incontrano un po’ sotto il centro della camera e guardano in basso, dove il vetro si raccoglie. L’oculare disegna il canvas della camera SLICES volte: ogni spicchio è un ritaglio a cuneo dell’angolo 2π/SLICES, ruotato al suo posto, e uno spicchio sì e uno no è ribaltato, così i bordi combaciano come in due specchi veri. Sopra vanno le giunture appena visibili degli specchi, il velo grigio dell’errore (modalità saturation) e il riflesso finale.
Per chi non vede e per chi non vuole movimento
L’oculare è un role=progressbar con aria-valuenow e un aria-valuetext che dice quante immagini sono state lette, il riquadro ha aria-busy mentre lavora e una riga aria-live dice quando la palette parte, si ferma e quali colori ha scelto. I campioni sono una lista con il codice scritto. Il pulsante cambia parola (Generate palette, Generating…, Retry, Regenerate) e prende la larghezza nuova con un piccolo rimbalzo; mentre lavora è aria-disabled.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
IMAGES | script.js | 24 | Quante immagini ha la moodboard. |
SECONDS | script.js | 6 | Quanto dura una palette nella demo, in secondi (una vera segue il generatore). |
PIECES | script.js | 34 | Quanti pezzi di vetro colorato riempiono la camera. |
SLICES | script.js | 8 | Quanti spicchi a specchio mostra l’oculare (un numero pari). |
DRUM | script.js | 0.8 | Quanto in fretta gira il tamburo mentre lavora, in radianti al secondo. |
GRAVITY | script.js | 1100 | Quanto forte cade il vetro, in pixel al secondo quadrato. |
FRICTION | script.js | 0.35 | Quanto il vetro fa presa sulla parete e sugli altri pezzi: più alto, più il mucchio sale prima di franare. |
BOUNCE | script.js | 0.18 | Quanto rimbalza un pezzo quando atterra: 0 per niente, 0.6 molto. |
CHIP | script.js | 1 | Quanto sono grandi i pezzi: 0.7 piccoli, 1.3 grandi. |
FAIL_EVERY | script.js | 2 | Nella demo, una palette su quante non riesce a leggere la moodboard (0 mai). |
FAIL_AT | script.js | 0.55 | Fin dove arriva la palette che si ferma, da 0 a 1. |
SHEEN | script.js | 0.8 | Il riflesso che attraversa l’oculare quando la palette è pronta: 0 niente, 1.5 forte. |
Quando usarla
Per un’attesa di qualche secondo in cui un programma sceglie dei colori: una palette da una moodboard o da una foto, un tema generato per un’app, i colori di un marchio estratti da un sito. Il caleidoscopio dice subito che si sta lavorando sul colore e il disegno che si arricchisce fa sentire che il risultato si sta formando; per un caricamento qualsiasi, che non parla di colori, la metafora è fuori posto.
Sul telefono
Il riquadro prende la larghezza dello schermo meno 32 pixel (358 a 390) e resta alto 266; l’oculare scende da 184 a 164 pixel, la scritta grande a 27, e i cinque campioni si stringono con spazi di 6. La camera si ridimensiona con l’oculare e il vetro resta al suo posto. Il canvas disegna alla densità vera dello schermo, fino a due volte. Il pulsante è una pillola alta 36: col dito si schiaccia e rimbalza, e la scritta si allarga sull’asse della larghezza solo sotto il mouse.
Con il movimento ridotto
Il tamburo non gira e il vetro non cade: ogni pezzo nuovo compare in dissolvenza già al suo posto nel mucchio (la fisica lo fa assestare di nascosto prima di mostrarlo), senza lampi. Niente strattone né sobbalzo nell’errore (resta il velo grigio), niente riflesso alla fine; i campioni compaiono in dissolvenza al loro posto e il vetro colorato sparisce in dissolvenza quando si rigenera. Il motivo si arricchisce lo stesso, perché è lui che dice a che punto si è.
Trappole
- I cerchi che riempiono i pezzi uscivano enormi: la distanza dal contorno prendeva il lato più lontano invece del più vicino, e il vetro galleggiava sparso per la camera tenuto lontano da cerchi invisibili. Ora è la distanza minima con il segno giusto, e i pezzi si ammucchiano.
- Con il tamburo veloce e molto attrito il mucchio restava incollato alla parete a ore nove e il cuneo degli specchi, in basso, vedeva poco vetro: il tamburo gira a 0.8 radianti al secondo con attrito 0.35, e il mucchio frana prima di uscire dal cuneo.
- Con gli specchi che si incontravano al centro della camera il motivo restava vuoto in mezzo fino alla fine: ora si incontrano sotto il centro, a 0.3 del raggio, dove il vetro arriva davvero.
- Le perline tonde di vetro, moltiplicate dagli specchi, facevano file di pallini al centro: ci sono solo pezzi a spigoli.
- I codici esadecimali sotto i campioni sembravano scritti a macchina: a 11 pixel il carattere sceglie da solo il suo taglio per i testi piccoli, largo e con le tacche. Lì il taglio è fissato a quello per i titoli.
- Con molti pezzi grandi la cima della camera restava piena e l’ultimo pezzo non trovava mai un posto libero: la palette restava al 100% per sempre. Ora, dopo mezzo secondo di attesa, il pezzo entra lo stesso e gli urti gli fanno posto.
- Una riga dell’errore arrivava al bordo del riquadro e al telefono sarebbe uscita: è diventata più corta.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
