L’interruttore della livella

Interruttori, Fisica, SVG, HoverGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Tre interruttori delle impostazioni di un programma di grafica, e ognuno è una piccola livella a bolla in alluminio anodizzato che bascula su un perno. Acceso, la livella si inclina con la destra in alto e la bolla, una massa vera in un liquido denso, resta indietro, risale allungandosi in una losanga e si ferma tonda fra i segni di destra, mentre il liquido si scalda e il nome si accende. Col mouse sopra la livella pende un poco dalla parte del puntatore, e si può afferrare e inclinare a mano.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The spirit level switch</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">
    <!-- three switches from the settings of a design tool, each one a small torpedo level in anodised aluminium that
         rocks on a pin, with a glass vial of yellow-green spirit and an air bubble in it. Switched on, the level tips
         with its right end up and the bubble runs up to the marks at that end; off, it tips the other way. The
         pointer's weight leans it a little, and it can be grabbed and tipped by hand -->
    <div class="lv" data-levels>
      <div class="lv__row lv__row--cobalt" data-row>
        <label class="lv__name" for="lv-snap">Snap to grid</label>
        <button class="lv__switch" id="lv-snap" type="button" role="switch" aria-checked="false" aria-describedby="lv-snap-hint" data-switch data-autoclic>
          <svg class="lv__art" viewBox="6 4.5 228 57" aria-hidden="true" focusable="false" data-art></svg>
        </button>
        <span class="sr" id="lv-snap-hint">Objects lock to the 8 px grid</span>
      </div>
      <div class="lv__row lv__row--graphite" data-row>
        <label class="lv__name" for="lv-rulers">Show rulers</label>
        <button class="lv__switch" id="lv-rulers" type="button" role="switch" aria-checked="true" aria-describedby="lv-rulers-hint" data-switch>
          <svg class="lv__art" viewBox="6 4.5 228 57" aria-hidden="true" focusable="false" data-art></svg>
        </button>
        <span class="sr" id="lv-rulers-hint">Rulers along the top and left</span>
      </div>
      <div class="lv__row lv__row--ember" data-row>
        <label class="lv__name" for="lv-guides">Smart guides</label>
        <button class="lv__switch" id="lv-guides" type="button" role="switch" aria-checked="false" aria-describedby="lv-guides-hint" data-switch>
          <svg class="lv__art" viewBox="6 4.5 228 57" aria-hidden="true" focusable="false" data-art></svg>
        </button>
        <span class="sr" id="lv-guides-hint">Lines appear as edges align</span>
      </div>
      <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.

49 valori da cambiare

Apri il Playground

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 «L’interruttore della livella» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero tre scritte una sotto l’altra, Snap to grid, Show rulers e Smart guides, e accanto a ognuna il suo interruttore: una piccola livella da tasca alta 56 pixel, con la barra di alluminio anodizzato (blu cobalto, grafite, arancio) spazzolata per il lungo, gli spigoli lavorati che brillano d’argento, due tappi di gomma alle estremità, una O incisa a sinistra e una I a destra come su un interruttore a bilanciere, e sotto il centro la testa del perno su cui bascula. Al centro, in una finestra scura, c’è la fiala di vetro appena arcuata, piena di un liquido giallo verde che fa luce da sé, con due coppie di segni incisi vicino alle estremità e una bolla d’aria chiara, col bordo scuro e un riflesso. Da spento la livella è inclinata con la sinistra in alto, la bolla sta fra i segni di sinistra e il liquido è di un verde più freddo e pallido; il nome è grigio. Accendendo, la livella si inclina dall’altra parte: la bolla resta un attimo indietro, poi risale il pendio sempre più in fretta e si allunga in una losanga sottile, con la testa tonda e la coda che si assottiglia, va appena oltre il segno, torna indietro e si ferma, e mentre rallenta si arrotonda con un piccolo guizzo. I segni vicini alla bolla si piegano come visti attraverso una lente, e passandoci dentro si spezzano sul suo bordo. Intanto il liquido si scalda verso un verde acido più luminoso, la finestra si illumina e il nome diventa bianco quando la bolla arriva ai segni. Le tre bolle sono diverse: la prima media, la seconda più piccola e lenta in un liquido più denso, la terza più grande e svelta, che sfora un poco di più. Col mouse sopra, il peso del puntatore fa pendere la livella dalla sua parte e la bolla scivola via di qualche pixel; si può anche afferrare la livella e inclinarla, alzando il punto preso o tirandola di lato: segue la mano, la bolla corre e, se la si porta oltre, si schiaccia contro il fondo della fiala; lasciata, ricade nello stato più vicino. Anche un clic sul nome accende e spegne.

Come funziona

Tre interruttori veri

Ogni livella è un button con role switch e aria-checked, con la sua label for (il nome) e aria-describedby su una frase nascosta che dice a cosa serve: Invio e Spazio accendono e spengono, la freccia a destra accende e quella a sinistra spegne, il clic sul nome anche. Una riga aria-live annuncia il nuovo stato. Le tre righe stanno in una griglia a due colonne condivise (subgrid), così i nomi e le livelle restano allineati.

La livella disegnata

Lo script disegna una volta l’SVG di ogni livella: la barra con un gradiente nei colori del suo anodizzato, una grana spazzolata di righine a caso (sempre le stesse per ogni livella), il lucido, gli spigoli chiari, i tappi di gomma con le righe, la O e la I incise, la finestra con lo spigolo che prende luce in basso e l’ombra del labbro in alto. La fiala è una capsula piegata lungo un arco: sopra e sotto due Bézier quadratiche, alle estremità due mezzi cerchi. Il viewBox è tagliato sulla livella inclinata del tutto, così l’interruttore è alto 56 pixel e la livella, accesa o spenta, li riempie senza uscire; la rotazione è una trasformazione CSS intorno al perno (transform-origin al 77,19 per cento).

La bolla è una massa

La fiala è arcuata, quindi il suo punto più alto si sposta lungo la fiala quando la livella si inclina: alla piena inclinazione TILT sta fra i segni. La bolla è tirata verso quel punto con una forza che cresce con la distanza e frenata dal liquido: accelerazione ω²(cima − s) − 2ζω·v, con ω da SPEED e ζ da DRAG, diversi per ogni bolla. Si calcola in quattro passi a fotogramma su gsap.ticker, col passo di tempo limitato a 1/30 di secondo; le estremità della fiala la fermano con un piccolo colpo. L’inclinazione stessa è un tween di GSAP, quindi la bolla resta indietro e poi accelera.

La forma e il menisco

La lunghezza della bolla segue la sua velocità attraverso una piccola molla rigida, così quando si ferma ha un guizzo; l’altezza è l’area divisa per la lunghezza, e non supera il vetro. Il contorno è una superellisse di 48 punti, piatta in alto dove la bolla preme sul vetro, con la testa più squadrata e la coda che si assottiglia da sotto in proporzione alla velocità. Il menisco sono tre bande evenodd fra contorni sempre più interni, scure fuori e più chiare dentro, più spesse alle estremità; sopra, un riflesso lungo il bordo alto, un orlo chiaro in basso e un puntino di luce.

La lente

I quattro segni si ridisegnano a ogni fotogramma come linee di 19 punti. Per ogni punto si guarda la distanza dalla bolla in unità della bolla: dentro la bolla il segno si vede più piccolo (0,76 volte, verso il suo centro), fuori viene spinto verso l’esterno di LENS·e^(−2,4·(d−1)), così si piega intorno a lei; dove attraversa il bordo la linea si interrompe, invece di tagliare il menisco con un tratto storto.

Mano, colore, quiete

Col mouse sopra, una molla morbida porta la livella a pendere di LEAN gradi dalla parte del puntatore. Trascinata oltre 4 pixel prende il puntatore: alzare il punto preso la ruota intorno al perno e tirarla di lato la inclina dalla stessa parte, fino a GRAB volte TILT; lasciata, va nello stato più vicino, e il clic che segue il trascinamento non conta. Il colore del liquido segue l’inclinazione (gli stop del gradiente si rimescolano solo quando cambia), la luce del nome segue la bolla (--lit sulla riga). Ogni fotogramma si confronta una chiave di valori arrotondati: quando non cambia niente, niente si ridisegna.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TILT`	script.js	`4`	Quanto si inclina la livella per acceso (destra in alto) e spento (sinistra in alto), in gradi.
`TIP`	script.js	`0.55`	I secondi che la livella impiega a inclinarsi dall’altra parte.
`LEAN`	script.js	`0.75`	Quanto il peso del puntatore fa pendere la livella sotto il mouse, in gradi (0, niente).
`SIZE`	script.js	`[1, 0.86, 1.12]`	Quanto è grande la bolla di ogni livella, dall’alto in basso.
`SPEED`	script.js	`[8.2, 6, 10.5]`	Quanto in fretta ogni bolla risponde alla pendenza.
`DRAG`	script.js	`[0.74, 0.9, 0.68]`	Quanto il liquido trattiene ogni bolla: sotto 1 va un poco oltre il segno e torna.
`STRETCH`	script.js	`0.6`	Quanto si allunga la bolla quando corre (l’area resta la stessa, quindi si assottiglia).
`LENS`	script.js	`2.6`	Quanto il liquido intorno alla bolla piega i segni dietro di lei (0, niente lente).
`GRAB`	script.js	`1.8`	Fin dove si può inclinare la livella a mano, in multipli di TILT.

Provali nel Playground

Quando usarla

Per gli interruttori di un programma che ha a che fare con allineare e misurare: le impostazioni di un editor di grafica o di un CAD (griglia, righelli, guide), un’app di arredamento o di cantiere, uno strumento per fotografi o per chi appende quadri. La bolla che corre fra i segni dice da sola acceso e spento anche senza colore. Sta bene in un piccolo gruppo come qui; in un elenco lungo di impostazioni conviene usarlo per poche voci, accanto a interruttori normali.

Sul telefono

Stessa misura che sul computer: ogni livella è 224 per 56 pixel e a 390 pixel il nome e la livella stanno ancora su una riga (il gruppo è largo 338); su schermi più stretti la livella si rimpicciolisce con lo schermo. Il tocco accende e spegne; il dito trascinato di lato inclina la livella e la bolla corre, mentre in su e in giù la pagina scorre ancora (touch-action: pan-y). Niente pendenza sotto il mouse, che col dito non c’è.

Con il movimento ridotto

Niente movimento: la livella è subito alla sua nuova inclinazione e la bolla non corre, svanisce a un’estremità e ricompare fra i segni dell’altra in meno di mezzo secondo; il colore del liquido e la luce del nome cambiano in dissolvenza. Niente pendenza sotto il mouse e niente trascinamento; il clic, il tocco e la tastiera funzionano come sempre.

Trappole

Il menisco disegnato come un solo contorno scuro faceva sembrare la bolla un adesivo a pillola. Ora sono tre bande fra contorni sempre più interni, scure fuori e più chiare dentro, rientrate di più alle estremità che sopra e sotto: spesse dove il liquido si vede di taglio, sottili dove la bolla preme sul vetro.
I segni piegati dalla lente erano una linea sola: dove entravano nella bolla un tratto storto tagliava il menisco. La linea si interrompe (una M nuova nel tracciato) ogni volta che passa il bordo della bolla.
Nella prima versione il riquadro della livella era la livella a riposo, e inclinata di 4 gradi le sue estremità ne uscivano di quasi 8 pixel sopra e sotto: misurato, l’interruttore era più alto dei 56 pixel della famiglia. Ora il viewBox è tagliato sull’ingombro della livella inclinata del tutto e il perno sta al 77,19 per cento della sua altezza: la livella misurata va da 0,3 a 55,8 pixel.
Il clic che segue un trascinamento rimetteva l’interruttore com’era. Un segno dice di saltarlo; lo consuma il clic, e il primo tocco o tasto dopo lo cancella, perché col dito trascinato il clic non arriva. Niente setTimeout: il banco del sito non potrebbe rallentarlo.
La grana spazzolata sull’arancio, troppo contrastata, sembrava legno; e le piccole tacche d’usura sul bordo di sotto e la testa chiara del perno sembravano puntini luminosi. Grana più leggera e arancio più saturo, tacche solo sullo spigolo in alto, il perno è una vite d’acciaio scura col taglio.
Con il movimento ridotto, tre clic in fretta potevano lasciare una dissolvenza vecchia che riportava la bolla all’estremità sbagliata. Ogni nuova dissolvenza ferma quella di prima.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 7 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.