Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante a onda di pendoli
Il pulsante Sync devices con dentro un'onda di pendoli vista dall'alto: dodici sfere d'acciaio appese ognuna a due fili, sempre più corti da sinistra a destra. Sotto il puntatore una barra arancio le spinge tutte di lato; al clic le lascia andare. Partono insieme, poi ognuna resta indietro di un passo sulla vicina e la fila diventa un serpente, due file, tre, un groviglio, finché dopo sei secondi esatti sono di nuovo tutte in riga, nello stesso istante, e la barra le prende: In sync.
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 pendulum wave button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the pendulum wave button: the Sync button of a devices app. In its window hangs a pendulum wave seen from
above, a row of steel balls on threads of different lengths. A bar pulls them aside together and lets go:
each swings at its own pace, they drift into snakes, rows and knots, and after one cycle exactly they are
all in line again, where the bar catches them: in sync -->
<div class="sync" data-sync>
<button class="sync__btn" type="button" data-btn data-autoclic>
<span class="sync__well" aria-hidden="true" data-well>
<canvas class="sync__canvas" data-canvas></canvas>
</span>
<span class="sync__label" data-label>
<span class="sync__icons" aria-hidden="true" data-icons>
<svg class="sync__icon" viewBox="0 0 24 24" data-arrows>
<path d="M5.42 9.61A7 7 0 0 1 18.58 9.61"/>
<path d="M19.81 6.23 18.58 9.61 15.46 7.81"/>
<path d="M18.58 14.39A7 7 0 0 1 5.42 14.39"/>
<path d="M4.19 17.77 5.42 14.39 8.54 16.19"/>
</svg>
<svg class="sync__icon sync__icon--done" viewBox="0 0 24 24" data-check>
<path d="M5 12.6l4.4 4.3L19.2 7.2" data-tick/>
</svg>
</span>
<span class="sync__words" data-words>Sync devices</span>
</span>
</button>
<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.
20 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 onda di pendoli» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola verde bottiglia alta 60 pixel, con le frecce della sincronizzazione e Sync devices in un sans color crema. A sinistra nella pillola è incassata una finestra dal bordo tondo, con un fondo color osso stampato come una scheda di laboratorio: una tacca sotto ogni sfera in alto e in basso, e una riga tratteggiata. Dentro, vista dall'alto, c'è un'onda di pendoli: dodici sfere d'acciaio lucido appese a un filo teso che attraversa la finestra, ognuna con due fili a V, così può oscillare solo di traverso alla fila. I fili sono sempre più corti da sinistra a destra, e si capisce dalle ombre: le sfere a sinistra pendono quasi sul fondo e hanno l'ombra corta e netta, quelle a destra stanno più in alto e l'ombra è più lunga e morbida. Quando arriva il puntatore, da una fessura sotto la finestra sale una barra arancio laccata: corre veloce fino a toccare le sfere, poi le spinge piano tutte di lato, fino alla riga tratteggiata, e le tiene lì; premendo spinge ancora un poco e la pillola si abbassa. Al clic la barra scende sotto le sfere e scivola via, e loro partono: prima tutte insieme, poi ognuna resta indietro di un passo sulla vicina, e la fila diventa un'onda che scorre, due onde, un serpente doppio, due file perfette a metà del ciclo, tre gruppi, un groviglio, e di nuovo all'indietro; l'etichetta dice Syncing con le frecce spente. Nell'ultimo mezzo secondo la barra risale sotto le sfere, più in basso di loro, e alla fine del ciclo, quando tutte sono in cima alla loro oscillazione nella stessa riga, sale al loro piano e le prende; le riporta sulla riga tratteggiata da cui erano partite, un riflesso corre lungo la fila, le frecce girano via e si disegna la spunta di In sync. Dopo un momento la barra le posa giù, loro dondolano appena e la barra sparisce di nuovo nella fessura. Al telefono il dito fa la barra: premuto porta le sfere di lato, alzato le lascia andare. Con la tastiera il fuoco mostra l'anello e fa salire la barra, Invio sincronizza.
Come funziona
Pendoli accordati
Il pendolo di sinistra fa SWINGS oscillazioni in CYCLE secondi, ognuno dei seguenti una in più: la frequenza del pendolo i è (SWINGS + i) / CYCLE. Dopo un ciclo ognuno ha fatto un numero intero di oscillazioni, quindi sono di nuovo tutti in riga; a metà ciclo i pari e i dispari sono ai due lati, e in mezzo la differenza di fase fra vicini cresce piano e disegna le onde. La lunghezza viene dalla frequenza, L = g / ω², con un pixel per millimetro e la gravità vera: da 25 centimetri a sinistra a 3 a destra.
Il periodo esatto
Un pendolo che oscilla largo è più lento di quanto dice la formula delle piccole oscillazioni: il suo periodo è quello piccolo per 2K(sin(θ/2))/π, dove K è l'integrale ellittico completo di prima specie, che si calcola in poche righe con la media aritmetico-geometrica di 1 e cos(θ/2). La sfera più corta parte a 24 gradi: la sua lunghezza si trova ripetendo il conto otto volte, per l'ampiezza media che avrà nel ciclo mentre l'aria la smorza (DAMPING), e ω è alzata di un pelo perché anche lo smorzamento rallenta.
La fisica
Ogni sfera è un pendolo vero, θ'' = −(g/L) sin θ − c θ', fatto avanzare a passi di 1/480 di secondo con Eulero semi-implicito, col passo del fotogramma limitato a 1/30. Dall'angolo vengono lo spostamento sullo schermo, L sin θ, e l'altezza sul fondo, che decide l'ombra. Mentre sincronizza c vale DAMPING; a riposo un freno più forte ferma i dondolii in un momento. Quando niente si muove il canvas non si ridisegna.
La barra
La barra è un vincolo da una parte sola: se è contro le sfere, nessuna può stare sotto il suo bordo, e quelle che raggiunge prendono la sua velocità; se è scesa sotto di loro, le sfere ci passano sopra. Sale in due tempi, veloce fino alla sfera più bassa e poi con un sine.inOut lento, perché colpite di corsa le sfere lente volerebbero oltre. Al rilascio le tiene tutte appoggiate al bordo nello stesso istante, poi scende (si scurisce e l'ombra si accorcia) e scivola via sotto di loro.
La presa
La presa è guidata dall'orologio della simulazione, non da un tween: negli ultimi LEAD secondi del ciclo la barra risale sotto le sfere, ancora sotto il loro piano, e arriva nel punto più alto previsto (l'ampiezza di partenza per e^(−c·CYCLE/2)) proprio quando il ciclo finisce. Lì torna un vincolo e le tiene; poi le riporta sulla riga tratteggiata. Un riflesso bianco corre lungo la fila, una gaussiana che scorre, e l'etichetta cambia con la spunta che si disegna.
Vista dall'alto
Il fondo con la grana, le tacche e la riga tratteggiata si disegna una volta sola su un canvas a parte. Ogni sfera è dipinta una volta sul suo piccolo canvas, alla sua misura (un decimo più piccola se pende più in basso): gradiente radiale d'acciaio, il fondo color osso riflesso nel bordo in basso e il punto di luce. A ogni fotogramma: ombre (spostate e sfocate in proporzione all'altezza sul fondo), barra, fili a V, sfere, e sopra a tutto il filo teso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BUSY | script.js | Syncing | La scritta mentre i pendoli oscillano. |
DONE | script.js | In sync | La scritta quando sono tutti di nuovo in riga. |
PENDULUMS | script.js | 12 | Quanti pendoli ci sono nella finestra. |
CYCLE | script.js | 6 | I secondi dopo cui sono di nuovo tutti in riga: quanto dura la sincronizzazione. |
SWINGS | script.js | 6 | Quante oscillazioni fa in quel tempo il pendolo più lungo; ognuno dei seguenti ne fa una in più. Con più oscillazioni le sfere vanno più veloci, ma le figure restano le stesse: dipendono solo da CYCLE. |
SWING | script.js | 12.5 | Quanto la barra porta di lato le sfere prima di lasciarle, in pixel. |
DAMPING | script.js | 0.1 | Quanto l'aria frena le oscillazioni, al secondo: 0 per niente. |
HOLD | script.js | 1.7 | I secondi in cui la barra tiene le sfere in riga, con In sync, prima di posarle. |
LIGHT | script.js | 1 | Quanto sono lunghe le ombre sul fondo: 0, la lampada è proprio sopra. |
Quando usarla
Per l'azione che rimette d'accordo più cose: sincronizzare i dispositivi, le cartelle, i calendari, le luci di casa o gli altoparlanti di più stanze; e anche Align, Calibrate o Rebalance. Il ciclo che si chiude da solo racconta l'attesa, quindi sta bene dove l'azione dura davvero qualche secondo. È un pulsante da far vedere, uno per pagina, in strumenti per la casa, la musica, la scienza o la didattica.
Sul telefono
La pillola è alta 60 pixel e larga 348, o lo schermo meno 32; la finestra prende lo spazio accanto alle parole e, se è stretta, le sfere si fanno più piccole e più vicine. Senza puntatore il dito fa la barra: premuto, la barra porta le sfere di lato; alzato, le lascia andare. Se il dito scivola via per scorrere la pagina, la barra torna nella fessura.
Con il movimento ridotto
Niente oscillazioni e niente barra. Al clic le sfere si spengono tutte e si riaccendono una alla volta da sinistra a destra, nel tempo del ciclo, così si vede che la sincronizzazione va avanti; poi In sync con la spunta, in dissolvenza, e dopo un momento di nuovo Sync devices. A ogni cambio l'etichetta intera sparisce e ricompare, così l'icona non scivola al suo posto nuovo. La pillola premuta si scurisce appena invece di rimpicciolire.
Trappole
- Col periodo delle piccole oscillazioni la fila non tornava in riga: la sfera più corta, 3 centimetri di filo lasciati a 24 gradi, arrivava alla fine del ciclo quasi 3 pixel più in basso delle altre. Con il periodo esatto calcolato sull'ampiezza di partenza lo scarto scendeva a 0,4 pixel; calcolato sull'ampiezza media del ciclo, che l'aria fa calare, è di un decimo di pixel.
- La barra che sale da sola (al tocco, dall'anteprima, con Invio) colpiva le sfere ancora veloce: le più lente volavano oltre il suo bordo, al rilascio non partivano dalla stessa altezza e il primo serpente nasceva storto. Ora la barra sale in due tempi, corsa veloce fino alla sfera più bassa e spinta lenta, e al rilascio le tiene tutte appoggiate.
- A riposo la barra arancio stava in fondo alla finestra, sotto le sfere, e sembrava una barra di avanzamento: ora si ritira in una fessura sotto il bordo ed esce solo col puntatore, il tocco o il fuoco.
- Le ombre calcolate con l'altezza vera diventavano macchie enormi con pochi SWINGS o un CYCLE lungo, quando i fili arrivano a due metri: ora le altezze della fila si stendono sempre sulla stessa corsa d'ombra, dal pendolo più corto al più lungo.
- L'aria toglie un quarto dell'oscillazione in sei secondi, e le sfere prese alla fine restavano 3 pixel sotto la riga tratteggiata da cui erano partite, come se non fossero proprio tornate: la barra, dopo averle prese, le riporta sulla riga.
- Con l'etichetta allineata a sinistra Syncing e In sync, più corte di Sync devices, lasciavano un buco verde a destra; e se l'etichetta cambiasse larghezza cambierebbe anche la finestra, con le sfere che saltano di lato. Ora l'etichetta ha la larghezza della scritta più lunga, il gruppo icona e parole sta al centro e l'icona scivola al posto nuovo.
Librerie
GSAP 3.15.0, IBM Plex Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
