Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il menu delle isobare
Nello stile minimal, su nero: il menu di un’app del meteo. Dietro le voci c’è un campo di pressione invisibile, disegnato a isobare sottilissime che si ricalcolano a ogni fotogramma. La voce sotto il puntatore diventa un centro di bassa pressione: le isobare le si stringono intorno in anelli, scivolano piano verso di lei e prendono il colore d’accento, e la sua pressione scende sulla destra. All’apertura le linee si disegnano dal centro in un cerchio che si allarga.
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 isobar menu</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 menu of a weather app. Behind the links an invisible pressure field is drawn as hairline isobars. The link
under the pointer becomes a low: the isobars tighten round it in rings, drift in towards it and light up, its
pressure reading drops; the others relax. Opening, the isobars are drawn out from the middle -->
<div class="isobar" data-frame>
<canvas class="field" aria-hidden="true" data-canvas></canvas>
<button class="toggle" type="button" aria-expanded="false" aria-controls="isobar-menu" data-toggle data-autoclic>
<span class="toggle__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" data-icon>
<path class="toggle__iso" data-iso="0" d="M3 9.5 C7 6, 11 13, 15 9.5 S21 7, 21 7"/>
<path class="toggle__iso" data-iso="1" d="M3 14.5 C7 11, 11 18, 15 14.5 S21 12, 21 12"/>
</svg>
</span>
<span class="toggle__words" aria-hidden="true">
<span class="toggle__word" data-word-open>Menu</span>
<span class="toggle__word" data-word-close>Close</span>
</span>
<span class="sr" data-toggle-name>Open the menu</span>
</button>
<p class="brand" aria-hidden="true" data-brand>Cirrus weather</p>
<nav class="menu" id="isobar-menu" aria-label="Main" data-menu inert>
<ul class="menu__list">
<li><a class="row" href="#today" aria-current="page" data-row><span class="row__mask"><span class="row__word" data-word>Today</span></span><span class="row__read" data-read>1013 hPa</span></a></li>
<li><a class="row" href="#radar" data-row><span class="row__mask"><span class="row__word" data-word>Radar</span></span><span class="row__read" data-read>1013 hPa</span></a></li>
<li><a class="row" href="#forecast" data-row><span class="row__mask"><span class="row__word" data-word>Forecast</span></span><span class="row__read" data-read>1013 hPa</span></a></li>
<li><a class="row" href="#maps" data-row><span class="row__mask"><span class="row__word" data-word>Maps</span></span><span class="row__read" data-read>1013 hPa</span></a></li>
<li><a class="row" href="#alerts" data-row><span class="row__mask"><span class="row__word" data-word>Alerts</span></span><span class="row__read" data-read>1013 hPa</span></a></li>
</ul>
</nav>
</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.
30 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 menu delle isobare» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c’è solo un pulsante a pillola con un filo sottile: dentro, due piccole isobare ondulate disegnate a linea e la parola Menu; a destra, piccolo, il nome dell’app, Cirrus weather. Premuto, Menu sale e al suo posto arriva Close, le due isobare del pulsante si allontanano con un rimbalzo, e dal centro si allarga un cerchio dentro cui compaiono le isobare: decine di linee bianche sottilissime, quasi orizzontali, che ondeggiano piano perché due rigonfiamenti invisibili del campo girano lentissimi. Le cinque voci salgono una dopo l’altra dalle loro maschere, Today, Radar, Forecast, Maps e Alerts, ognuna con la sua pressione a destra, 1013 hPa. Accanto alla voce della pagina corrente le isobare fanno già una piccola conca. Muovendo il mouse sulle voci, quella sotto il puntatore diventa una bassa pressione su una molla, subito dopo la parola, come la L accanto al suo nome su una carta del tempo: le linee le si stringono intorno in anelli sempre più fitti e più spessi, che scivolano piano verso il centro come se il vento li tirasse dentro, quelli più vicini si accendono di vermiglio, la parola prende peso e larghezza e la sua pressione scende fino a 986 hPa, scritta in vermiglio. Le altre voci si distendono e tornano alla pendenza. Anche il puntatore da solo piega appena le linee dove passa. Cliccando una voce la sua conca si fa ancora più profonda per un attimo, poi il menu si chiude: le voci scendono dall’ultima, il cerchio delle isobare si ritira verso il centro e Close torna Menu, con le due isobare del pulsante che rimbalzano al loro posto.
Come funziona
Un campo di pressione
La pressione in ogni punto è una somma: una pendenza leggera dall’alto in basso, due onde lente che girano col tempo, e una conca gaussiana per ogni voce, profonda DEPTH per la sua forza e larga SPREAD righe. Il puntatore aggiunge una conca piccola, più stretta. Niente di disegnato a mano: le linee vengono tutte da questa formula.
Le isobare con le marching squares
A ogni fotogramma la pressione si calcola sui nodi di una griglia di 7 pixel; per ogni livello, a passi di RINGS, ogni cella dice da quale lato entra e da quale esce la linea, e il punto preciso sul lato si trova per interpolazione. Sono segmenti corti che, messi in fila, fanno curve morbide. I segmenti si raccolgono in pochi gruppi per spessore e colore, così ogni fotogramma ha solo sette tratti di pennello.
Gli anelli che scivolano dentro
I livelli non stanno fermi: ogni secondo scendono di FLOW passi, così ogni anello intorno a una conca si stringe piano verso il centro e ne nasce uno nuovo fuori, come linee di vento che vengono risucchiate. Lo spessore e la luce di una linea crescono con quanta conca si sente in quel punto.
La molla delle conche
Ogni voce ha la sua forza, che va verso 1 se il puntatore è su di lei, verso 0,22 se è la pagina corrente e verso 0 altrimenti, con una molla (SPRING) e una spinta al cambio: la conca va un poco oltre e si assesta. La forza muove anche il peso e la larghezza di Mona Sans e la pressione scritta a destra, 1013 meno 27 per la forza. Gli anelli entro 1,35 volte la larghezza della conca prendono l’accento, sfumando con la distanza.
Apertura, chiusura, tastiera
Una timeline GSAP: Menu e Close si scambiano, le isobare compaiono dentro un cerchio che si allarga dal centro in 1,4 secondi, le voci salgono dalle maschere a 50 millesimi l’una dall’altra. Alla chiusura il cerchio si ritira e le isobare del pulsante tornano con un elastic.out. Il pulsante ha aria-expanded, il menu chiuso è inert, le frecce spostano la conca, Esc chiude, Tab gira fra pulsante e voci. Il clic dell’anteprima (detail 0) fa un giro intero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DEPTH | script.js | 1.1 | Quanto è profonda la conca sotto il puntatore: più è profonda, più le isobare si stringono intorno alla voce. |
SPREAD | script.js | 0.85 | Quanto è larga una conca, in righe. |
RINGS | script.js | 0.12 | Il passo di pressione fra due isobare (meno, più linee). |
FLOW | script.js | 0.035 | Quanto in fretta gli anelli scivolano verso la conca (0, stanno fermi). |
SPRING | script.js | [150, 13] | La molla delle conche: quanto è rigida e quanto è frenata. |
WEIGHT | script.js | [300, 640] | Il peso di una voce quieta e di quella sotto il puntatore. |
WIDTH | script.js | [90, 112] | La larghezza di una voce quieta e di quella sotto il puntatore. |
STAGGER | script.js | 0.05 | I secondi fra una voce e l’altra all’apertura e alla chiusura. |
Quando usarla
Per il menu di un’app o di un sito del meteo, di una stazione meteorologica, di un servizio per chi va in barca, in volo o in montagna, o di uno studio che lavora coi dati. Sta bene su nero con quattro, cinque o sei voci corte; la lettura a destra può dire un numero vero di ogni sezione.
Sul telefono
Il riquadro è largo quanto lo schermo meno 32 pixel e alto al massimo l’88% dell’altezza; le voci si rimpiccioliscono con la larghezza e l’altezza, e sotto i 340 pixel il nome dell’app non c’è. La conca segue il dito che scorre sulle voci, come il mouse, e un tocco sceglie la voce.
Con il movimento ridotto
Il campo resta fermo: niente onde che girano, niente anelli che scivolano, niente molle. Le isobare e le voci compaiono in dissolvenza, e la conca passa da una voce all’altra di colpo, con le stesse linee più fitte e lo stesso accento.
Trappole
- Con le marching squares le celle «a sella» (casi 5 e 10) hanno due segmenti: vanno disegnati tutti e due, se no le isobare si spezzano proprio dove due conche si toccano.
- Un tratto di pennello per segmento fa migliaia di stroke() a fotogramma: i segmenti si raccolgono per spessore e colore e si disegnano in un percorso solo per gruppo.
- Il riquadro del campo è più grande del menu di 24 pixel per lato e sfuma con una maschera radiale: senza, le isobare finiscono di colpo sul bordo e il menu sembra una finestra.
Librerie
GSAP 3.15.0, Mona Sans (font variabile, con gli assi della larghezza e del peso) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
