Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
L’interruttore sul filo teso
L’interruttore Do not disturb di un’app per concentrarsi, nello stile minimal: la corsa è un filo sottilissimo teso fra due tacche, e il pomello è una perlina infilata sopra. Il peso della perlina piega il filo; acceso, la perlina scorre fino in fondo, va oltre di un pixel e torna, e il filo vibra e si assesta. Accanto la parola Off si assottiglia e svanisce, On arriva sottile e prende peso.
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 taut wire switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Do not disturb switch of a focus app: the track is a hairline of wire stretched between two posts, and the
knob is a bead threaded on it. The bead's weight bends the wire; sliding along, it drags the bend with it, and
when it lands the wire rings and settles. The word next to it takes weight as the bead travels -->
<div class="dnd" data-dnd>
<label class="dnd__name" id="dnd-name" for="dnd-switch" data-name>Do not disturb</label>
<div class="dnd__row">
<button class="wire" id="dnd-switch" type="button" role="switch" aria-checked="false" aria-labelledby="dnd-name" data-switch data-autoclic>
<svg class="wire__art" aria-hidden="true" focusable="false" data-art>
<line class="wire__post" data-post></line>
<line class="wire__post" data-post></line>
<path class="wire__line" data-line></path>
<g class="wire__bead" data-bead>
<circle class="wire__ball" data-ball></circle>
<circle class="wire__ball wire__ball--on" data-ball-on></circle>
</g>
</svg>
</button>
<label class="dnd__state" for="dnd-switch" aria-hidden="true" data-state>
<span class="dnd__word dnd__word--off" data-off>Off</span>
<span class="dnd__word dnd__word--on" data-on>On</span>
</label>
</div>
</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.
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 «L’interruttore sul filo teso» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, in alto a sinistra la scritta Do not disturb; sotto, un filo grigio sottile come un capello teso fra due tacche bianche, e infilata sul filo una perlina bianca. Accanto, a destra, la parola Off in grigio, sottile. Il peso della perlina piega il filo in una V appena accennata. Quando la pagina si apre le due tacche si alzano, il filo si disegna dall’una all’altra, la perlina cade dall’alto sul filo, che la prende, si abbassa e ondeggia prima di fermarsi. Accendendo (un clic, un tocco, Spazio, Invio o la freccia a destra) la perlina corre all’altra estremità su una molla: passando nel mezzo affonda di più, perché lì il filo cede di più, e la piega del filo la segue. Arrivata va oltre di un pixel e torna, e posandosi pizzica il filo, che vibra qualche volta e si assesta. Intanto la perlina diventa arancione e la parola cambia: Off perde peso, si stringe e svanisce salendo, On arriva sottile e stretta dal basso, prende peso fino al nero pieno, un poco troppo all’arrivo, e si assesta col filo. Sotto il mouse la perlina si sporge verso l’altra parte; premuta diventa più pesante e affonda. Si può prendere e trascinare lungo il filo, anche in su e in giù: il filo si tende a V sotto il dito e, lasciato, scatta indietro e vibra. Anche un clic sulla scritta o sulla parola accende e spegne.
Come funziona
Un interruttore vero
È un button con role switch e aria-checked, col nome preso dalla scritta (aria-labelledby): Spazio e Invio lo accendono e lo spengono, le frecce a destra e a sinistra lo mettono acceso o spento, e la scritta e la parola accanto sono label for, quindi si possono cliccare. Dentro c’è un solo SVG con le due tacche, il filo (un path) e la perlina, un gruppo con due cerchi: bianco sotto e arancione sopra, con l’opacità che segue la perlina lungo il filo.
Il filo è una corda vera
Lo spostamento del filo è la somma dei suoi primi 48 modi, sin(n π x / L), ognuno un oscillatore smorzato spinto dal peso della perlina nel punto dove si trova. Fermi, i modi sommati danno esattamente la V di una corda con un carico in un punto, più profonda nel mezzo (4 SAG a(L − a) / L²): per questo la perlina, attraversando, scende lungo una curva. Le note del filo sono n volte TONE, appena crescenti come in un filo un po’ rigido, e le più alte si smorzano prima.
Il passo esatto
Ogni modo avanza con la soluzione esatta della sua equazione sul passo (1/240 di secondo), non con Eulero: le note alte, molto più veloci dello schermo, restano stabili a qualunque frequenza e seguono la perlina, quelle basse suonano. I seni dei 48 modi nel punto della perlina si calcolano con la ricorrenza sin((n+1)θ) = 2 cos θ sin(nθ) − sin((n−1)θ); quelli degli 84 punti del disegno sono in una tabella rifatta al resize. Nel path il punto della perlina è inserito esatto, così la piega è netta.
La perlina e il pizzico
Lungo il filo la perlina è una massa su una molla (SPRING) smorzata appena sotto il critico (DAMPING 0,82): su cento pixel di corsa va oltre di circa un pixel. Quando attraversa il suo posto pizzica il filo: ogni modo riceve una spinta di velocità proporzionale a sin(nθ) / n^1,5 e alla velocità d’arrivo (RING), e la parola riceve un colpo di peso su una sua molla morbida. Premuta, il suo peso diventa PRESS volte; trascinata, il peso si calcola per tenerla all’altezza del dito, e lasciata torna 1: il filo scatta indietro da solo, perché i modi sono rimasti dov’erano.
La parola
Off e On sono due parole nello stesso posto, in Archivo variabile, e i loro assi seguono la perlina: Off passa dal peso 320 a 120 e dalla larghezza 100 a 70 mentre svanisce salendo, On dal 130 al 760 e dalla larghezza 70 a 100 mentre arriva dal basso; al peso di On si aggiunge il colpo dell’arrivo, che va oltre e si assesta. Si scrive solo ciò che cambia, e quando filo, perlina e parola sono fermi il ciclo si toglie dal ticker di GSAP.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TONE | script.js | 4.2 | La nota più bassa del filo, in vibrazioni al secondo: più alta, un filo più teso. |
DECAY | script.js | 0.04 | Quanto presto il filo smette di vibrare (lo smorzamento della nota più bassa). |
SAG | script.js | 5.5 | Quanto il peso della perlina piega il filo nel mezzo, in pixel. |
SPRING | script.js | 160 | Quanto forte la molla tira la perlina verso la sua estremità. |
DAMPING | script.js | 0.82 | Come si ferma la perlina: sotto 1 va un poco oltre (0,82 è circa un pixel). |
RING | script.js | 5 | Quanto forte la perlina pizzica il filo quando arriva, in pixel. |
PRESS | script.js | 1.9 | Quanto diventa più pesante la perlina sotto il dito o il mouse. |
PULL | script.js | 13 | Di quanto si può tirare la perlina fuori dalla linea, in su o in giù, in pixel. |
PEEK | script.js | 5 | Di quanti pixel la perlina si sporge verso l’altra estremità sotto il mouse. |
WEIGHT | script.js | [320, 760] | Il peso della parola Off e della parola On (da 100 a 900). |
Quando usarla
Per un interruttore che chiede calma: Non disturbare, la modalità concentrazione, la pausa delle notifiche, il silenzioso di un’app per meditare, leggere o scrivere. Il filo che si assesta dice da solo che tutto si è fermato. È un pezzo da mettere da solo, su un fondo vuoto, dove si nota; in un elenco lungo di impostazioni conviene usarlo per una voce sola.
Sul telefono
Stessa misura che sul computer, 184 per 56 pixel, e a 390 pixel tutto sta comodo con tanto vuoto intorno; sotto i 300 pixel il filo si accorcia a 156. Il tocco accende e spegne; appena il dito si appoggia la perlina diventa più pesante e affonda, come col mouse. Il dito trascinato porta la perlina lungo il filo e in su e in giù: per questo sull’interruttore la pagina non scorre (touch-action: none), fuori sì. Niente sporgenza sotto il mouse, che col dito non c’è.
Con il movimento ridotto
Niente molle e niente vibrazioni: il filo è disegnato fermo con la sua piega, la perlina svanisce da una parte e ricompare dall’altra già del suo colore, e Off e On si scambiano in dissolvenza in tre decimi di secondo, ognuna col suo peso. All’apertura tutto compare in dissolvenza già al suo posto. Premere non affonda e non si trascina; il clic, il tocco e la tastiera funzionano come sempre.
Trappole
- Con Eulero, anche a passi di 1/240 di secondo, i modi alti (centinaia di vibrazioni al secondo) esploderebbero dopo pochi fotogrammi: ogni modo avanza con la soluzione esatta dell’oscillatore smorzato sul passo, stabile per qualunque nota e qualunque passo.
- Con la perlina ferma sulle tacche il filo non si piegherebbe affatto (agli estremi una corda non si sposta): le posizioni di riposo stanno al 20 e all’80 per cento del filo, dove il peso si vede.
- Disegnato solo dai punti fissi, il filo sotto la perlina sarebbe una curva tonda e la perlina sembrerebbe galleggiarci sopra: il punto della perlina è inserito esatto nel path, e la piega è netta.
- Il primo arrivo sul filo, cadendo dall’alto 34 pixel, copriva la scritta Do not disturb: la caduta parte 15 pixel sopra il filo, dentro l’interruttore, e la perlina compare mentre cade.
- L’anteprima della libreria clicca con un clic finto ogni 2,8 secondi: il clic finto (isTrusted falso, detail 0) fa un giro intero in una timeline di GSAP, acceso, la perlina tirata giù e lasciata, spento, e i clic che arrivano durante il giro si ignorano. Spazio e Invio fanno clic veri e accendono e spengono come sempre.
- Trascinando in su e in giù, col dito si sposterebbe la pagina: sull’interruttore touch-action è none, perché la perlina si tira anche in verticale.
Librerie
GSAP 3.15.0, Archivo (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.
