Il pavimento che si alza
SVG, Hover, Fisica
NuovaGratis
Torna alla libreria
Il foglio col filo a piombo
Nello stile minimal: un foglio con una cornice sottile si inclina seguendo il puntatore, e dal suo bordo alto pende un filo a piombo, un pendolo smorzato vero che resta sempre verticale mentre il foglio gira. Una tacca vermiglia legge l'angolo su una scala di tacche fini, le cifre lo dicono in gradi e ingrassano più il foglio pende; tornato dritto, il piombo si ferma sullo zero.
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>Aplomb</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one sheet in a hairline frame that tilts with the pointer; a plumb line hangs from its top edge and stays
true while the sheet turns, and the angle is read on the scale and in figures -->
<main class="stage" data-stage tabindex="0" role="slider" aria-label="Tilt of the sheet" aria-valuemin="-22" aria-valuemax="22" aria-valuenow="0" aria-valuetext="0.0 degrees, level">
<svg class="scene" data-scene aria-hidden="true">
<g class="world">
<path class="guide" data-guide-top d="" />
<path class="guide" data-guide-bottom d="" />
</g>
<g data-sheet>
<rect class="paper" data-paper />
<path class="frame" data-frame-l d="" />
<path class="frame" data-frame-r d="" />
<text class="brand" data-brand>Aplomb</text>
<g data-ticks></g>
<g data-labels></g>
<path class="sweep" data-sweep d="" />
<g data-notch-at><path class="notch" data-notch d="" /></g>
<g data-pend>
<path class="thread" data-thread d="" />
<g data-bob-at><path class="bob" data-bob d="" /></g>
</g>
<circle class="pin" data-pin r="4" />
<text class="num" data-num><tspan data-digits>0.0</tspan><tspan class="num__deg" data-deg dx="0.04em" dy="-0.5em">°</tspan></text>
<text class="say" data-say>Level</text>
</g>
</svg>
<p class="hint" data-hint>Move the pointer to tilt the sheet.</p>
</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 foglio col filo a piombo» da Animorio e adattala al mio sitoCosa fa
Una stanza bianca calda con una sola riga tratteggiata verticale, la vera verticale. Al centro si disegna la cornice di un foglio: due mezze righe partono insieme dal centro del bordo alto e si incontrano in basso. Compare un piccolo perno, le tacche della scala spuntano dal centro verso i lati con un rimbalzo, poi il filo scende col suo piombo nero, si tende con un piccolo strappo elastico (il perno sente il colpo) e il piombo arriva dondolando. Sotto escono le cifre in gradi, prima strette e poi larghe, e la parola Level. Muovendo il puntatore a destra o a sinistra il foglio si inclina da quella parte, con una molla misurata. Il perno è attaccato al foglio: quando il foglio gira lo porta di lato e un po' in su, quindi il filo resta indietro, oscilla come un pendolo vero e torna verticale mentre il foglio sotto di lui è storto. Una tacca vermiglia segna dove il filo incrocia la scala, un arco vermiglio sottile mostra quanto si è allontanato dallo zero, e le tacche sotto il filo si allungano un poco, come sotto una lente. Le cifre leggono l'angolo come lo legge il piombo: ingrassano più il foglio pende e si stringono mentre il piombo oscilla; sotto, Leaning right o Leaning left. Quando il piombo si ferma la tacca scatta al suo posto con un piccolo colpo elastico e le cifre fanno un cenno col peso; se il foglio è dritto la tacca si posa sullo zero e la tacca dello zero e la parola Level si accendono di vermiglio. Senza nessuno davanti, dopo un paio di secondi il foglio si inclina da solo a destra, poi a sinistra, e torna dritto.
Come funziona
Un foglio su una molla
Il puntatore dà solo un bersaglio: la sua distanza dal centro, in parte della larghezza, per l'inclinazione massima. Il foglio ci arriva con una molla smorzata (frequenza in hertz e smorzamento 0,62, quindi un pelo di overshoot e poi si siede), calcolata a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. Tutto è un solo SVG grande quanto la pagina; il foglio è un gruppo con translate e rotate, e le sue misure si calcolano perché, inclinato al massimo, stia dentro lo schermo.
Il pendolo su un perno che si muove
Il perno sta sul foglio, sopra il centro: la sua accelerazione si ricava dalla rotazione del foglio (la parte tangenziale e quella centripeta). Il piombo segue l'equazione vera del pendolo col punto di sospensione che accelera: l'accelerazione del perno entra come una gravità in più, verso il lato opposto. Lo smorzamento si sceglie dal tempo in cui il piombo si ferma, e la gravità dalla durata di un'oscillazione, così il movimento è uguale a ogni misura dello schermo. Ai capi della scala c'è un fermo: il filo ci batte e torna indietro.
La scala che legge il piombo
Il pendolo è disegnato dentro il gruppo del foglio, ruotato della differenza fra l'angolo del piombo e quello del foglio: così resta verticale nella stanza mentre tutto intorno gira. Quella differenza è la lettura: la tacca d'accento e l'arco dallo zero si disegnano con lo stesso angolo, e ogni tacca della scala si allunga con una campana gaussiana intorno al filo, come sotto una lente.
Cifre che pesano
Il numero è testo SVG in Roboto Flex, un carattere variabile. Lo script scrive due variabili CSS: --k, quanto pende il foglio, che sposta font-weight fra --light e --heavy, e --s, quanto veloce oscilla il piombo, che stringe font-stretch. Le cifre sono tabellari, così non ballano mentre cambiano.
Quando il piombo si ferma
Se il piombo e il foglio restano quasi fermi per tre decimi di secondo la lettura si blocca: la tacca si allunga e torna con elastic.out, le cifre fanno un cenno di peso, la parola sotto cambia con un piccolo salto. Quando tutto è fermo davvero, foglio e piombo scivolano al loro punto esatto e il calcolo si addormenta: un foglio dritto legge sempre 0.0, e la tacca dello zero e Level si accendono. La mano invisibile che inclina il foglio quando non c'è nessuno è una timeline GSAP che sposta il bersaglio, e si fa da parte appena arriva un puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'Aplomb' | La parolina in alto sul foglio (anche vuota). |
MAX_TILT | script.js | 22 | Quanto si inclina il foglio, in gradi, col puntatore al bordo della pagina: più è alto, più il foglio si rimpicciolisce per starci. |
SHEET | script.js | 1.5 | Quanto è pronto il foglio a seguire, in hertz: 0.6 è un'asse pesante, 3 un cartoncino. |
SWING | script.js | 1.5 | Quanti secondi dura un'oscillazione intera del piombo: più lunga è un filo più lungo. |
SETTLE | script.js | 3.5 | In quanti secondi il piombo si ferma dopo una spinta: poco è un piombo nell'olio, tanto dondola a lungo. |
MAGNIFY | script.js | 0.7 | Quanto si allungano le tacche sotto il filo (0 = per niente). |
IDLE | script.js | 2.4 | Dopo quanti secondi senza puntatore il foglio si inclina da solo (0 = mai). |
--light | style.css | 280 | Il peso delle cifre col foglio dritto, da 100 a 1000. |
--heavy | style.css | 720 | Il peso delle cifre all'inclinazione massima, da 100 a 1000. |
Quando usarla
Per un'apertura che si lascia toccare: il portfolio di uno studio di architettura o di design, la pagina di un attrezzo o di un'app di misura, un sito di arredamento o di cornici, una pagina 404 che dice che qualcosa è storto. Funziona anche come piccolo strumento dentro una pagina, al posto di un'illustrazione ferma.
Sul telefono
La stessa fisica con le misure adattate: il foglio è un poco più stretto e alto, si inclina trascinando il dito a destra o a sinistra in qualunque punto (lì la pagina non scorre, è una scena sola) e torna dritto quando il dito si alza. La scritta d'aiuto diventa «Drag a finger to tilt the sheet.».
Con il movimento ridotto
Niente molle, niente oscillazioni e niente mano invisibile: tutto compare in dissolvenza già al suo posto, il foglio va subito all'angolo del puntatore e il piombo è già fermo in verticale; le cifre e la parola sotto cambiano con una breve dissolvenza.
Trappole
- Il piombo va disegnato dentro il gruppo del foglio ruotato della differenza fra i due angoli, non in un livello a parte sopra: così il perno disegnato e il punto da cui parte il filo coincidono sempre, al decimo di pixel, anche mentre il foglio gira.
- Con la gravità scritta in pixel il pendolo cambierebbe ritmo con la misura dello schermo (sul telefono, col filo più corto, dondolerebbe molto più svelto): la gravità si ricava dalla durata di un'oscillazione e dalla lunghezza del filo.
- Con una lettura che cambia a ogni passo la parola sotto salterebbe fra Leaning right e Leaning left a ogni passaggio del piombo per lo zero: la parola cambia solo oltre tre decimi di grado.
- L'etichetta 0 della scala stava proprio dove passa il filo a riposo e la tagliava sempre a metà: lo zero si riconosce dalla tacca più lunga, che a riposo si accende.
- Il video della scheda si ferma quando l'immagine resta uguale per un secondo senza animazioni GSAP in programma: la mano invisibile è un gsap.delayedCall con una timeline, non un timer, e a riposo il calcolo si addormenta al punto esatto.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
