Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante a domino
Il pulsante Run workflow di uno strumento di automazione: una pillola color grafite vista dall’alto, con sopra una fila di tessere del domino in piedi, in leggera curva. Premuto, la prima tessera cade e la reazione a catena attraversa il pulsante accelerando, una tessera dopo l’altra, mentre la scritta segue i passi del flusso fino a Workflow complete. Le tessere sono corpi rigidi simulati davvero, che ruotano sullo spigolo e si appoggiano l’una sull’altra; poi si rialzano all’indietro, come un video riavvolto.
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 domino button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the domino button: the Run workflow button of an automation tool, a graphite pill seen from above with a row
of tiles standing on it in a gentle curve. Pressed, the first tile falls and the chain runs across the pill,
one step of the workflow after the other -->
<div class="domino" data-domino>
<div class="pill" data-pill>
<canvas class="pill__scene" aria-hidden="true" data-scene></canvas>
<!-- the words lie on the pill's top, in its perspective: real text, laid there by the script -->
<span class="pill__label" aria-hidden="true" data-label>
<span class="pill__icon" data-icon><svg viewBox="0 0 24 24"><path d="M8 5.6v12.8c0 .8.9 1.3 1.6.8l9.4-6.4c.6-.4.6-1.2 0-1.6L9.6 4.8C8.9 4.3 8 4.8 8 5.6z"/></svg></span>
<span class="pill__word" data-word>Run workflow</span>
</span>
<!-- the real button: a transparent area over the pill -->
<button class="pill__hit" type="button" aria-label="Run workflow" aria-describedby="domino-note" data-hit data-autoclic></button>
</div>
<p class="note" id="domino-note"><span data-steps>4 steps</span> · <span data-last>last run 2 hours ago</span></p>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
27 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 pulsante a domino» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola grafite, spessa come una tavoletta, vista di tre quarti dall’alto, con il bordo che prende la luce e un’ombra morbida sotto. Sul davanti della pillola, posata nella sua prospettiva, la scritta Run workflow con un triangolo di play; dietro, una fila di quindici tessere color avorio in piedi, in leggera curva, con le loro ombre sul piano. Sotto, la riga grigia 4 steps · last run 2 hours ago. Passando col mouse sulla pillola il piano si schiarisce appena e le tessere vicine al puntatore tremano, di più se il mouse si muove in fretta. Premendo, la pillola affonda di qualche pixel e la prima tessera viene spinta: esita, si inclina e cade sulla seconda, che cade sulla terza, e la catena corre verso destra sempre più veloce, con le tessere già cadute appoggiate l’una sull’altra a embrice. Ogni tessera, coricandosi, mostra il suo dorso colorato, dal viola al verde lungo la fila; intanto la scritta passa per Fetching new orders, Enriching contacts, Updating the CRM e Posting the summary. Quando l’ultima tessera tocca il piano la scritta diventa Workflow complete con una spunta verde e la riga sotto dice last run just now. Dopo qualche secondo la scritta dice Resetting e le tessere si rialzano all’indietro, dall’ultima alla prima, come un video riavvolto; poi torna Run workflow. Premendo di nuovo a catena finita, la fila si rialza e riparte.
Come funziona
Una tessera, un pendolo rovesciato
Ogni tessera è un corpo rigido che ruota sullo spigolo davanti della sua base. Il baricentro sta a metà altezza e metà spessore: la sua altezza dal piano, (t/2)·sin a + (h/2)·cos a, è l’energia della tessera, e la tessera resta in piedi finché l’angolo non supera arctan(t/h), poi la gravità la fa cadere sempre più in fretta, come un pendolo rovesciato. La spinta del dito è una velocità iniziale di PUSH volte quella appena sufficiente a farla cadere.
Il contatto, dalla geometria
Una tessera caduta si appoggia alla successiva: l’angolo a cui lo fa è quello per cui il suo spigolo in alto sta esattamente sulla faccia dietro dell’altra, trovato con una bisezione. Così tutta la parte caduta della catena dipende da un angolo solo, quello della tessera davanti, e quando la tessera davanti si corica fino a toccare il piano le altre si fermano a embrice, ognuna sulla successiva.
La catena come un corpo solo
La parte che cade ha un’energia e un’inerzia che cambiano con l’angolo: l’inerzia è la somma di quella di ogni tessera per il quadrato di quanto gira quando gira la prima, calcolato con le differenze finite. L’equazione del moto viene dal lagrangiano, q″ = (−V′ − I′·q′²/2) / I, integrata in dieci passi per fotogramma col passo limitato a 1/30 di secondo. A ogni urto la tessera nuova entra nel corpo e la catena tiene KEEP della sua energia: per questo parte piano, accelera e poi corre a velocità costante, come una catena vera.
Il disegno in 3D
La pillola, le tessere e le ombre sono un piccolo modello disegnato su un canvas a ogni fotogramma: una camera alzata di 56 gradi proietta i punti con un po’ di prospettiva, le facce girate dall’altra parte (riconosciute dal verso in cui girano sullo schermo) non si disegnano, le tessere vanno dalla più lontana alla più vicina, e ogni faccia prende la luce da una lampada. Le ombre sono gli otto spigoli di ogni tessera proiettati sul piano lungo la luce, chiusi in un involucro convesso e disegnati tutti insieme in un canvas a parte, così dove si sovrappongono non diventano più scure.
La scritta sulla pillola e il video riavvolto
La scritta è testo HTML vero, posato sul piano della pillola con una matrix() fatta da due vettori proiettati, e affonda con lei. Durante la caduta lo script registra gli angoli di ogni fotogramma: il ritorno è quella registrazione suonata al contrario in REWIND secondi, così le tessere si rialzano proprio come sono cadute, dall’ultima alla prima. Quando niente si muove il canvas non viene ridisegnato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILES | script.js | 15 | Quante tessere stanno in piedi nella fila (la pillola si allunga con loro). |
GAP | script.js | 23 | La distanza da una tessera all’altra, in pixel (una tessera è alta 54). |
GRAVITY | script.js | 950 | La gravità che fa cadere le tessere, in pixel al secondo quadrato: meno è un rallentatore. |
PUSH | script.js | 1.25 | Quanto forte la pressione spinge la prima tessera (1 = appena quanto basta a farla cadere). |
KEEP | script.js | 0.66 | La parte di energia che la catena tiene a ogni urto. |
CURVE | script.js | 14 | Quanto si piega la fila, in pixel. |
DONE | script.js | 2.8 | I secondi in cui il pulsante dice Workflow complete prima che le tessere si rialzino. |
REWIND | script.js | 1.2 | I secondi del video riavvolto. |
TREMBLE | script.js | 1 | Quanto tremano le tessere vicine al puntatore. |
STEPS | script.js | ['Fetching new orders', 'Enriching contacts', 'Updating the CRM', 'Posting the summary'] | I lavori del flusso che la scritta attraversa mentre la catena corre. |
Quando usarla
Per il pulsante che fa partire qualcosa fatto di passi in fila: un flusso di automazione, una pipeline, un’importazione, una sequenza di email. La catena dice senza parole che un passo fa partire il successivo. Sta bene da solo, nel punto della pagina dove si lancia l’azione principale.
Sul telefono
Il disegno si scala sulla larghezza dello schermo (a 390 pixel la pillola è larga circa 350) e niente sfora. Il tocco preme la pillola, che affonda sotto il dito; il tremolio al passaggio è solo del mouse.
Con il movimento ridotto
Niente cade: la fila in piedi si dissolve nella fila coricata, coi dorsi colorati, e la scritta passa subito a Workflow complete; il ritorno è la stessa dissolvenza all’indietro. La pillola non affonda e le tessere non tremano.
Trappole
- Con la tessera che ruota sul centro della base, la catena non si fermava mai a embrice: le tessere cadute scivolavano l’una dentro l’altra. Il perno è lo spigolo davanti, e le tessere a riposo, quando tremano, ruotano sul centro solo per pochi centesimi di radiante.
- Simulare ogni tessera da sola, con gli urti come rimbalzi, faceva tremare tutta la fila e a volte una tessera passava attraverso l’altra. Con le tessere cadute legate dalla geometria la parte che cade ha un solo grado di libertà, e la fisica è stabile anche a passo grande.
- Senza perdita di energia agli urti la catena accelerava senza fine fino a diventare un lampo: con KEEP a due terzi arriva a una velocità costante, come quella vera.
- Il filtro blur() del canvas sulle ombre, a ogni fotogramma, bloccava il primo fotogramma per due secondi su un computer senza scheda grafica: le ombre ora sono un solo strato a metà opacità, e l’ombra morbida della pillola sulla pagina si disegna una volta sola per ogni misura.
- Con la camera girata dall’altra parte, le tessere in piedi mostravano già i dorsi colorati e la sorpresa della caduta spariva: la camera guarda le facce avorio, e il colore compare solo quando una tessera si corica.
- La scritta animata con un filtro blur sul testo trasformato in prospettiva rallentava ogni cambio di passo: cambia con una dissolvenza semplice.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
