Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della bussola
Il pulsante Use my location di un'app di consegne, con una vera bussola a liquido nella punta tonda della pillola, al posto dell'icona: la ghiera d'ottone zigrinata, la rosa stampata con le tacche e la N rossa, un ago bicolore che galleggia nel liquido, la cupola di vetro e una bollicina d'aria. L'ago è un pendolo di torsione vero: il puntatore vicino al pulsante è una calamita, l'ago gli si gira incontro, va un poco oltre e si assesta, e quando il puntatore se ne va torna a nord oscillando. Al clic l'ago cerca come disturbato e la rosa gira un poco; poi si blocca sul nord con un ultimo rimbalzo, un riflesso passa sull'ottone e la pillola si allarga su Delivering to Brera, Milan.
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 compass button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the compass button: the Use my location button of a delivery app, with a real liquid compass in the round left
end of the pill, where an icon would be. The needle is a torsion pendulum floating in the liquid: the pointer
near the button is a magnet, so the needle turns to it, goes a little past and settles, and swings back to
north when it leaves. A click looks for you (simulated, no real geolocation): the needle hunts, the card
turns, then it locks on north and the pill opens on the place found -->
<div class="locate" data-locate>
<button class="locate__btn" type="button" data-btn data-autoclic>
<span class="locate__fill" aria-hidden="true"></span>
<canvas class="locate__compass" aria-hidden="true" data-compass></canvas>
<span class="locate__faces">
<span class="locate__face" data-face="rest">
<span class="locate__word" data-wide="Use my location" data-rest-text>Use my location</span>
</span>
<span class="locate__face locate__face--busy" data-face="busy" aria-hidden="true">
<span class="locate__shine" data-busy-text>Locating…</span>
</span>
<span class="locate__face locate__face--found" data-face="found" aria-hidden="true">
<span class="locate__place">
<span class="locate__lead" data-lead-text>Delivering to</span>
<span class="locate__spot">
<svg class="locate__pin" viewBox="0 0 16 16" aria-hidden="true" data-pin>
<path d="M8 14.6c-.3 0-.6-.2-.8-.4C5.3 12 3.3 9.4 3.3 6.8a4.7 4.7 0 0 1 9.4 0c0 2.6-2 5.2-3.9 7.4-.2.2-.5.4-.8.4z"/>
<circle cx="8" cy="6.8" r="1.7"/>
</svg>
<span class="locate__name" data-place-text>Brera, Milan</span>
</span>
</span>
<span class="locate__change" data-change-text>Change</span>
</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.
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 pulsante della bussola» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color inchiostro blu notte, alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto. A destra, in Mona Sans color avorio, Use my location; nella punta tonda di sinistra, al posto dell'icona, una bussola a liquido vista dall'alto, larga 46 pixel: una ghiera d'ottone spazzolato con il bordo zigrinato, la scanalatura e lo smusso che scende verso il vetro, e dentro la rosa stampata su un cartoncino color crema, con le tacche ogni cinque gradi, più lunghe ogni trenta, la N rossa col suo cuneo e le lettere E, S, W girate verso il bordo, e una stella a otto punte appena stampata nel mezzo. Sopra galleggia l'ago, una losanga sottile con la cresta in mezzo: la metà nord rossa, la metà sud d'acciaio, e le due facce di ogni metà prendono la luce o la perdono secondo come l'ago è girato rispetto alla lampada in alto a sinistra; sul perno un cappellotto d'ottone, e sotto, sul cartoncino, l'ombra morbida dell'ago. Il vetro ha il suo riflesso largo in alto a sinistra, un punto di luce netto e un filo chiaro sul bordo opposto; sotto il vetro, in basso a destra, una bollicina d'aria. All'arrivo il pulsante sale piano e l'ago, che era girato dall'altra parte, torna a nord oscillando. Col mouse sulla pagina il puntatore è una calamita: l'ago gli si gira incontro, tanto di più quanto è vicino, va un poco oltre e si assesta; passando sopra la pillola la scritta si allarga e il fondo si gonfia con un rimbalzo, e l'ago punta il puntatore lungo tutta la pillola. Quando il puntatore se ne va l'ago torna a nord con la sua oscillazione smorzata, e la bollicina si sposta un poco, trascinata dal liquido che l'ago fa girare. Premendo, il fondo si schiaccia e la bollicina scivola lontano dal dito. Al clic la scritta sale sfocandosi e arriva Locating…, con un riflesso che la attraversa: l'ago dà uno strattone e si mette a cercare, oscillando in modo irregolare e tremando come disturbato, e la rosa gira un poco di qua e di là, come in una mano. Dopo due secondi l'ago si blocca sul nord con un ultimo rimbalzo, la rosa torna diritta, un riflesso di luce passa su tutta la bussola, e la pillola si allarga con un piccolo rimbalzo: Delivering to, e sotto Brera, Milan con uno spillo rosso che cade e rimbalza, e a destra una piccola pillola Change. Un altro clic riporta il pulsante a riposo e l'ago torna a sentire la calamita. Con la tastiera il fuoco mostra un anello blu notte, la scritta si allarga e l'ago trasale; Invio o Spazio cercano. Al telefono il dito è la calamita e il tocco cerca.
Come funziona
La bussola su un canvas
Il canvas copre la punta tonda della pillola (60 pixel, alla densità dello schermo fino a 3). Quello che non si muove si dipinge una volta su due canvas fuori dallo schermo: sotto, l'ombra della cassa sulla pillola, la ghiera d'ottone (un gradiente conico con due lobi chiari uno di fronte all'altro, quello verso la lampada più chiaro), la zigrinatura, la scanalatura, lo smusso col gradiente girato di mezzo giro perché guarda in dentro, e il fondo color crema; sopra, l'ombra interna del bordo (un anello fuori dal ritaglio che getta la sua ombra dentro), il liquido più fondo verso il bordo e i riflessi del vetro. A ogni fotogramma si disegnano solo la rosa girata, l'ago, la bolla e il riflesso dell'aggancio, fra i due livelli fermi.
L'ago a faccette
L'ago è una losanga coi lati appena concavi, divisa dalla cresta in quattro facce. La luce di una faccia è il prodotto scalare fra la sua normale sullo schermo (la destra dell'ago, cos θ e sin θ, o la sinistra) e la direzione della lampada in alto a sinistra: girando, la faccia chiara passa dall'altra parte, e l'ago sembra di metallo. L'ombra sul cartoncino usa shadowOffset, che il canvas misura in pixel dello schermo e non gira con la trasformazione: cade sempre in basso a destra, a qualunque angolo. Il cappellotto del perno si disegna dopo, non girato, così la sua luce resta ferma.
Il pendolo di torsione
L'angolo θ dell'ago segue θ'' = ω0² · |B| · sin(β − θ) − c · θ', con ω0 = 2π · SWING. Il campo B è la somma di quello della terra, verso l'alto della pagina, e di quello del puntatore: verso di lui, forte MAGNET · 1 / (1 + (d / REACH)³), che cala col cubo della distanza come quello di una calamita e si spegne entro 16 pixel dal perno, dove tirerebbe in giù attraverso l'ago. Lo smorzamento viscoso è c = 2 · DAMPING · ω0 · √|B|: più il campo è forte più l'ago è veloce, e il liquido lo frena in proporzione, così fa sempre un sorpasso di circa un terzo e uno piccolo. Passi di 1/240 di secondo, fotogramma limitato a 1/30; quando l'ago non ha più velocità né coppia, la bolla è ferma e niente si muove, il ciclo smette di calcolare e di disegnare finché il puntatore o un'animazione non lo svegliano.
La bollicina
La bolla segue su una molla morbida (1,3 oscillazioni al secondo, smorzamento 0,55) il suo posto in basso a destra. Il liquido la trascina: la velocità del liquido nel suo punto è 0,24 · θ' girata di un quarto, quindi gira un poco intorno al perno quando l'ago oscilla. La cassa la spinge: la posizione della bussola sullo schermo si legge a ogni fotogramma, e la sua accelerazione (differenze finite, filtrate e limitate) la sposta come una bolla in un bicchiere che si muove, per esempio quando la pillola si allarga e la bussola scivola a sinistra. Una pressione inclina la bussola lontano dal dito e il posto della bolla si sposta verso il lato alto, di PRESS · 7 pixel. Il bordo la trattiene: la riporta dentro e le toglie la velocità verso fuori, con un piccolo rimbalzo.
La ricerca e l'aggancio
Cercando, la terra si indebolisce e arriva un campo che vaga: il suo angolo è rumore a gradiente su due ottave (2,7 · n(0,8 t) + 1,3 · n(2,2 t)), forte 1,6, con un tremito di rumore veloce sulla coppia. La rosa, su una molla sua, segue una mano che la gira fino a 0,42 radianti col rumore. È tutto simulato con i tempi di GSAP: il browser non chiede mai la posizione. Dopo LOCATE secondi il disturbo cessa, la terra diventa 2,6 volte più forte e lo smorzamento una volta e mezza: l'ago scatta sul nord con un rimbalzo di una decina di gradi e uno piccolo. Un riflesso a bande passa su tutta la cassa in modalità screen, e la pillola si allarga alla larghezza misurata del posto trovato con back.out.
Le parole e gli stati
Tre facce sovrapposte, larghe quanto le parole (width: max-content), misurate al pixel frazionario e arrotondate per eccesso: la pillola a riposo tiene già il posto della scritta larga (una copia invisibile a font-stretch 116%), quella trovata è larga quanto Delivering to, il posto e Change, e su uno schermo stretto il nome finisce coi puntini. Il pulsante è un button vero: aria-disabled mentre cerca e si apre, una zona aria-live dice Locating… e Delivering to Brera, Milan, e da trovato l'aria-label dice anche Change location. La ricerca e l'apertura durano circa 3,3 secondi, più dei 2,8 fra un clic e l'altro dell'anteprima: il secondo clic cade nell'attesa e la pillola aperta resta in vista un giro intero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Use my location | La scritta a riposo. Se è troppo lunga per lo spazio, il carattere si rimpicciolisce. |
BUSY | script.js | Locating… | La scritta mentre cerca; è anche quello che dice la zona aria-live. |
LEAD | script.js | Delivering to | La riga piccola sopra il posto trovato. |
PLACE | script.js | Brera, Milan | Il posto trovato. La ricerca è simulata: in un sito vero qui va l'indirizzo o il negozio che il tuo server trova. |
CHANGE | script.js | Change | La piccola pillola a destra del posto trovato: un clic riporta il pulsante a riposo. |
LOCATE | script.js | 2 | I secondi della ricerca, mentre l'ago cerca e la rosa gira. |
SWING | script.js | 1 | Le oscillazioni al secondo dell'ago nel solo campo della terra: più alto, un ago leggero e svelto; più basso, pesante e lento. |
DAMPING | script.js | 0.3 | Quanto il liquido frena l'ago: 0,05 oscilla a lungo, 0,3 va un terzo oltre e si assesta, 1 arriva piano al suo posto senza passarlo. |
MAGNET | script.js | 10 | Quanto è forte il puntatore come calamita da vicino, in campi della terra: 0 l'ago non lo sente; più è alto, più l'ago punta proprio verso di lui. |
REACH | script.js | 200 | Fin dove arriva la calamita, in pixel: a questa distanza tira con metà della sua forza, al doppio con un nono. |
PRESS | script.js | 1 | Quanto una pressione inclina la bussola: la bollicina scivola lontano dal dito. 0 resta ferma. |
Quando usarla
Per il pulsante che trova dove sei: l'indirizzo di consegna di un'app di cibo o di spesa, il negozio più vicino di una catena, il meteo del posto, un modulo di indirizzo, la ricerca di un ristorante o di un noleggio. La bussola sta bene nei siti di viaggio, di escursioni, di nautica e di cose fatte bene. Va collegato a una ricerca vera (la Geolocation API o l'indirizzo che l'utente ha salvato): qui è tutto simulato e il browser non chiede niente.
Sul telefono
La pillola a riposo è larga circa 225 pixel e quella aperta circa 275: a 390 pixel ci stanno con margine, e se il posto è più lungo dello schermo il nome finisce coi puntini. Il dito appoggiato sulla pagina vicino al pulsante è la calamita e l'ago gli si gira incontro; il tocco sul pulsante schiaccia il fondo, fa scivolare la bollicina e cerca. La bussola resta di 46 pixel.
Con il movimento ridotto
L'ago sta fermo sul nord e non segue il puntatore; niente oscillazione all'arrivo, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Cercando l'ago svanisce a un terzo e Locating… arriva in dissolvenza; trovato, l'ago torna pieno, la pillola prende la sua nuova larghezza mentre le parole sono sparite e Delivering to Brera, Milan arriva in dissolvenza, senza spillo che cade né riflesso. Un altro clic torna a riposo nello stesso modo.
Trappole
- Con uno smorzamento fisso l'ago, vicino alla calamita, suonava come un diapason: il campo dieci volte più forte lo fa oscillare tre volte più svelto e lo stesso freno lo trattiene tre volte meno, sei o sette oscillazioni prima di fermarsi. Ora lo smorzamento cresce con la radice del campo e l'ago fa sempre un sorpasso di circa un terzo e uno piccolo, verso la calamita come tornando a nord.
- La pressione inclinava la pillola in 3D verso il dito: Chrome rasterizzava il livello girato a bassa risoluzione e la bussola si sgranava, le lettere E e W illeggibili. Ora il fondo si schiaccia in 2D come le pillole del sito, e l'inclinazione resta solo nella fisica della bollicina, che scivola lontano dal dito.
- Il nome del posto finiva con «Brer…» o «Brera, Mil…»: la faccia del posto, in posizione assoluta, prendeva la larghezza della pillola di quel momento, e offsetWidth arrotonda per difetto, quindi a densità 3 la scatola era mezzo pixel più stretta del testo e scattavano i puntini. Ora le facce sono larghe max-content e si misurano con getBoundingClientRect, arrotondando per eccesso.
- La riga Delivering to era centrata sopra il nome: un button centra il testo di suo. Le facce hanno text-align: left.
- Al primo fotogramma, e tornando in vista, la velocità della cassa saltava da zero alla prima misura e la bollicina riceveva una spinta finta. Ora l'accelerazione si calcola solo dal terzo fotogramma misurato.
- Un lampo bianco sul vetro non si vedeva: sul cartoncino color crema il bianco non ha contrasto. Il riflesso dell'aggancio passa su tutta la cassa in modalità screen e si legge sull'ottone.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
