Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
Il piè di pagina degli orologi
Il piè di pagina di un piccolo orologiaio, quasi nero, con lungo il fondo una parete di orologini a tre lancette: le lancette, tutte insieme, scrivono il nome della bottega. Gli orologi vicini al puntatore girano le lancette a guardarlo e si accendono di rosso, un link puntato fa girare tutta la parete in un'onda finché scrive la parola del link, un tocco manda un anello di giri completi, e l'iscrizione alla lettera carica tutti gli orologi prima che la parete dica grazie.
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 clock-wall footer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the footer of a small watchmaker: along the bottom a wall of little clocks, each with three hands, and the
hands together write the atelier's name. Every clock looks at the pointer as it passes, a link pointed at
makes the whole wall turn its hands and spell that link's word, a tap sends a ring of spinning hands out
from the finger, and signing up to the letter winds every clock before the wall says thank you -->
<footer class="cw" data-footer data-autoclic>
<div class="cw__top">
<form class="cw__form" action="#" novalidate aria-labelledby="cw-news" data-form>
<h2 class="cw__title" id="cw-news">Notes from the bench</h2>
<p class="cw__lede">New pieces and repair stories, once a month.</p>
<label class="sr" for="cw-email">Email address</label>
<div class="cw__field" data-field>
<input class="cw__input" id="cw-email" name="email" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="send" placeholder="you@example.com" aria-describedby="cw-note" aria-invalid="false" data-input>
<button class="cw__send" type="submit" data-send>
<span class="cw__send-bg"></span>
<span class="cw__send-label" data-send-label>Subscribe</span>
<svg class="cw__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8.2"/><path class="cw__spin-hand" d="M12 12V7" data-spin-hand/><path d="M12 12l2.6 1.6"/></svg>
<svg class="cw__done" viewBox="0 0 24 24" aria-hidden="true" data-done><path d="M6.4 12.6l3.7 3.7 7.6-8.6"/></svg>
</button>
</div>
<p class="cw__note" id="cw-note" aria-live="polite" data-note><span class="cw__line">No spam, ever. Leave with one click.</span></p>
</form>
<nav class="cw__cols" aria-label="Footer">
<div class="cw__col">
<h3 class="cw__head">Shop</h3>
<ul class="cw__list">
<li><a class="cw__link" href="#" data-link data-word="WATCH">Watches</a></li>
<li><a class="cw__link" href="#" data-link data-word="STRAP">Straps</a></li>
<li><a class="cw__link" href="#" data-link data-word="GIFTS">Gifts</a></li>
</ul>
</div>
<div class="cw__col">
<h3 class="cw__head">Atelier</h3>
<ul class="cw__list">
<li><a class="cw__link" href="#" data-link data-word="STORY">Our story</a></li>
<li><a class="cw__link" href="#" data-link data-word="NOTES">Bench notes</a></li>
<li><a class="cw__link" href="#" data-link data-word="VISIT">Visit us</a></li>
</ul>
</div>
<div class="cw__col">
<h3 class="cw__head">Help</h3>
<ul class="cw__list">
<li><a class="cw__link" href="#" data-link data-word="CARE">Care guide</a></li>
<li><a class="cw__link" href="#" data-link data-word="SHIP">Shipping</a></li>
<li><a class="cw__link" href="#" data-link data-word="HELLO">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- the wall: one canvas, a few dozen clocks a row; the hands write the name, and the word of the link pointed at -->
<div class="cw__wall" data-wall>
<canvas class="cw__clocks" aria-hidden="true" data-clocks></canvas>
</div>
<div class="cw__base">
<p class="cw__brand">
<svg class="cw__mark" viewBox="0 0 28 28" aria-hidden="true"><circle class="m-case" cx="14" cy="14" r="12.2"/><path class="m-moon" d="M17.6 7.4a7 7 0 1 0 0 13.2 6 6 0 0 1 0-13.2z"/><path class="m-hand" d="M14 14l4.6-3.4"/></svg>
<span class="cw__name">Lune Watchmakers</span>
<span class="cw__copy"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1"/><path d="M7.9 4.5a2.3 2.3 0 1 0 0 3"/></svg><span class="sr">Copyright</span> 2026 Lune Atelier</span>
</p>
<nav class="cw__legal" aria-label="Legal">
<a class="cw__link cw__link--small" href="#" data-link>Terms</a>
<a class="cw__link cw__link--small" href="#" data-link>Privacy</a>
</nav>
</div>
</footer>
</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.
47 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 piè di pagina degli orologi» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un piè di pagina quasi nero con gli angoli tondi, largo 1040 pixel e alto circa 425, di Lune Watchmakers, un orologiaio inventato. In alto a sinistra l'iscrizione alla lettera del mese (Notes from the bench, una riga che dice cosa arriva, il campo dell'email col pulsante Subscribe dentro e una riga d'aiuto sotto), a destra tre colonne di link (Shop, Atelier, Help); poi, in un incavo scuro, una parete di orologini, trentatré per fila su cinque file, ognuno col suo quadrante in rilievo e tre lancette uguali; in fondo il marchio (una cassa tonda con la luna e una lancetta rossa), il copyright e i link legali. Quando il piè di pagina entra in vista tutte le lancette, ferme sulle dodici, fanno un giro intero in un'onda che corre da sinistra a destra e si fermano scrivendo LUNE: dove una lancetta arriva al bordo del suo orologio incontra quella dell'orologio accanto, e insieme tirano le aste delle lettere, dritte, ad angolo e in diagonale; gli orologi fuori dalla parola restano con le tre lancette corte e tenui, tutte sulle sette e mezza. Ogni lancetta si ferma come una vera, passando un poco oltre e tornando indietro. Il puntatore sulla parete è guardato: gli orologi intorno girano le lancette verso di lui, le allungano e diventano rossi, tanto più quanto più è vicino, e tornano alla parola quando se ne va. Puntando un link, o arrivandoci col tasto Tab, la parola del link avanza di due piccoli scatti, come la lancetta dei secondi, e si accende, mentre tutta la parete gira le lancette, colonna dopo colonna, e scrive la parola del link (WATCH, STRAP, GIFTS, STORY, NOTES, VISIT, CARE, SHIP, HELLO); andando da un link all'altro la parete passa da una parola all'altra senza tornare al nome, e lasciando i link torna a LUNE. Un clic o un tocco sulla parete manda un anello che si allarga dal dito: ogni orologio che raggiunge fa un giro intero, due lancette in un senso e una nell'altro, e per un attimo si accende di rosso. L'iscrizione ha i suoi stati: un indirizzo sbagliato fa tremare il campo, la riga sotto dice cosa non va in corallo e tutte le lancette della parete scuotono la testa; uno giusto fa uscire la parola dal pulsante, che si stringe in un piccolo quadrante con la lancetta che corre, e intanto la parete si carica: le tre lancette di ogni orologio girano sempre più in fretta, a tre velocità diverse; poi il pulsante mostra una spunta, la carica rallenta fino a un numero intero di giri e la parete scrive MERCI con un giro in più, lo tiene qualche secondo e torna al nome.
Come funziona
Le lettere come istruzioni per le lancette
Ogni lettera è una griglia di tre orologi per cinque, e per ogni orologio dice dove puntano le sue lancette, una cifra per lancetta letta come il tastierino numerico (8 nord, 6 est, 3 sud-est, 1 sud-ovest...); un punto è un orologio a riposo. Una lancetta che punta a un orologio che punta indietro tira un'asta intera fra i due centri; un incrocio a tre vie usa la terza lancetta, e le lancette che non servono si posano sopra le altre. La lunghezza di una lancetta che scrive arriva al bordo del quadrato del suo orologio: mezzo orologio in orizzontale, di più in diagonale, così le aste oblique si toccano anche loro.
Quanti orologi, e sempre dispari
La parete mette tanti orologi quanti ne stanno a CELL pixel, ma mai meno di quelli che servono per la parola più lunga (quattro colonne per lettera, meno l'ultimo spazio), e sempre un numero dispari, come le parole: così ogni parola sta esattamente nel mezzo. Al telefono gli orologi si rimpiccioliscono finché la parola più lunga ci sta. Il canvas si disegna alla densità dello schermo, il quadrante in rilievo una volta sola in un canvas a parte, e poi si copia.
Molle che inseguono un angolo
Ogni lancetta è una molla smorzata che insegue il suo angolo, in passi di 1/120 di secondo, e quando tutto è fermo il ciclo si addormenta. Il suo angolo è una somma: la parola (che GSAP sposta con uno stagger a funzione, un'onda da sinistra a destra e un poco più tardi in basso), gli anelli di giri completi, la carica e lo scuotere della testa. GSAP muove solo gli obiettivi: le lancette ci arrivano da sole e, con BOUNCE, passano oltre e tornano come quelle vere.
Il puntatore che viene guardato
Per ogni orologio la distanza dal puntatore dà un peso, da 1 sotto il puntatore a 0 a REACH orologi, con una curva morbida. L'obiettivo di ogni lancetta si sposta verso la direzione del puntatore per quel peso, sempre per la via più corta; lo stesso peso allunga le lancette e mescola il loro colore verso il rosso. Il peso sale in fretta e scende piano, così gli orologi si girano subito e tornano alla parola con calma.
Giri interi, mai a metà
Gli anelli e la carica non toccano l'angolo della parola: hanno i loro addendi. Un anello aggiunge un giro intero, in più o in meno, con un ritardo che cresce con la distanza dal clic. La carica gira a tre velocità intere (una, due e tre volte); all'iscrizione rallenta fino a un multiplo esatto di un giro e poi si trasferisce nella lancetta, così niente salta. Ogni nuova parola si calcola da dove ogni lancetta sta andando, non da dove si trova, e quindi arriva sempre giusta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'LUNE' | La parola che la parete scrive a riposo: fino a cinque lettere, dalla A alla Z. |
THANKS | script.js | 'MERCI' | La parola che la parete scrive quando qualcuno si iscrive. |
CELL | script.js | 28 | Quanto è grande ogni orologino al computer, in pixel (al telefono di meno, così la parola più lunga ci sta). |
REACH | script.js | 4 | Fino a quanti orologi di distanza le lancette si girano a guardare il puntatore. |
BOUNCE | script.js | 0.45 | Quanto le lancette passano oltre il punto dove si fermano e tornano indietro: a 0 si fermano secche. |
SWEEP | script.js | 1.1 | Quanto ci mettono le lancette a girare verso una parola nuova, in secondi. |
WAVE | script.js | 0.02 | Il ritardo da una colonna di orologi alla successiva, in secondi: l'onda che corre sulla parete. |
DIM | script.js | 0.22 | Quanto sono chiare le lancette degli orologi fuori dalla parola, da 0 a 1. |
WAIT | script.js | 1.4 | Quanto dura l'iscrizione nella demo, in secondi, mentre tutti gli orologi si caricano. |
Quando usarla
Per il piè di pagina di un orologiaio, di una gioielleria, di un negozio di design o di un brand di oggetti di precisione, ma anche di uno studio, di un festival o di un'app che vuole un nome che si muove: ovunque il fondo della pagina possa essere un piccolo spettacolo cinetico, con parole corte nei link.
Sul telefono
Il piè di pagina prende la larghezza dello schermo: la lettera va sopra e le tre colonne di link restano affiancate, con righe alte 44 pixel da toccare. La parete ha diciannove orologi per fila, più piccoli, perché la parola più lunga ci stia intera. Un tocco su un link accende la parola e la parete la scrive per un paio di secondi; un dito trascinato di lato sulla parete si fa guardare dagli orologi (su e giù scorre la pagina), e un tocco manda l'anello di giri.
Con il movimento ridotto
Nessuna lancetta gira: la parete compare in dissolvenza già col nome, e quando cambia parola si oscura un attimo e torna con la parola nuova già scritta. Gli orologi non guardano il puntatore, il tocco non manda anelli, il campo sbagliato non trema e le lancette non scuotono la testa, all'iscrizione la parete non si carica e scrive MERCI in dissolvenza. I link si accendono senza scattare in avanti, il pulsante non si stringe e la sua lancetta sta ferma.
Trappole
- Con lancette lunghe mezzo orologio le aste diagonali (la N, la V, la O) restavano a pezzi: in diagonale l'orologio accanto è più lontano. Ora la lunghezza di una lancetta che scrive arriva al bordo del quadrato del suo orologio, cioè 0,5 diviso il più grande fra seno e coseno dell'angolo.
- Un pallino al centro di ogni orologio, sulle aste delle lettere, faceva una fila di perline: il centro ora non si disegna, bastano le punte tonde delle lancette.
- Lasciando la zona del puntatore gli orologi più lontani si giravano a est mentre tornavano alla parola: la direzione del puntatore si azzerava fuori dal raggio. Ora ogni orologio ricorda l'ultima direzione in cui guardava.
- Riportando la carica a zero alla fine dell'iscrizione le lancette avrebbero fatto all'indietro tutti i giri fatti: la carica rallenta fino a un multiplo esatto di un giro (le tre velocità sono intere) e poi passa dentro la lancetta, e l'angolo totale non cambia.
- Una parola chiesta mentre l'onda della precedente era a metà arrivava storta: le parole nuove si calcolano da dove ogni lancetta sta andando (la fine del suo tween), non dall'angolo che ha in quel fotogramma.
- Durante la carica e il grazie un link puntato rovinava i giri interi: la parete è chiusa finché MERCI non ha finito, e poi scrive la parola del link puntato, se c'è, o il nome.
- Con un numero pari di orologi le parole, tutte lunghe un numero dispari di colonne, stavano mezzo orologio a sinistra: le colonne sono sempre dispari.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 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.
