Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante delle linee di campo
Nello stile minimal, su nero: il Connect di un altoparlante, una pillola sottile con un polo magnetico a ogni capo. Le linee del campo, sottilissime, vanno da un polo all’altro attraverso la pillola e intorno, con un filo di luce che le percorre. Il puntatore è un terzo polo che piega le linee vicine e le accende di vermiglio. Premuto, i poli si scambiano con un rimbalzo: le linee si spengono, passano per lo zero e si riaprono dall’altro capo, e arriva Connected.
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 field lines button</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 field lines button: a hairline pill on black with a magnetic pole at each end. The thin field lines run
from one pole to the other, through the pill and around it. The pointer is a third pole that bends the lines
near it; pressed, the poles swap with a bounce and the lines open again from the other side -->
<div class="field" data-field>
<canvas class="field__lines" data-canvas aria-hidden="true"></canvas>
<button class="field__btn" type="button" data-btn data-autoclic aria-pressed="false">
<span class="field__words">
<span class="field__word" data-word="rest">Connect</span>
<span class="field__word" data-word="done" aria-hidden="true">Connected</span>
</span>
</button>
<p class="field__note" data-note>Desk speaker · nearby</p>
<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.
18 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 delle linee di campo» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, al centro, una pillola alta 52 pixel col contorno sottile grigio scuro e dentro Connect in Archivo; sotto, piccola, la riga Desk speaker · nearby. Alle due punte tonde della pillola stanno due poli magnetici, segnati da una crocetta e da un trattino sottili: da quello positivo partono ventidue linee di campo che vanno all’altro, dritte attraverso la pillola e ad arco intorno, più spesse vicino ai poli e sottilissime lontano, e sfumano verso i bordi del riquadro. Lungo ogni linea scorre piano un filo di luce. Il puntatore è un terzo polo su una molla: le linee vicine si piegano verso di lui, alcune lo raggiungono e si accendono di vermiglio; sopra la pillola il contorno si schiarisce e la scritta si allarga sull’asse wdth con un rimbalzo. Premuta, la pillola cede e torna; i due poli si scambiano: la carica passa per lo zero, le linee si spengono, si riaprono dall’altro capo e la carica va un poco oltre prima di posarsi, mentre un lampo vermiglio corre lungo le linee. Connect esce verso l’alto, Connected entra dal basso e la riga dice paired. Premuta di nuovo, torna come prima. Quando nessuno muove il puntatore, un puntatore finto passa piano intorno alla pillola.
Come funziona
Il campo di tre cariche
Il campo in un punto è la somma di tre contributi, uno per carica: la carica per la distanza diviso il quadrato della distanza, più 24 perché vicino al polo il numero non esploda. Le cariche sono i due poli, alle punte della pillola, con s e meno s, e il puntatore.
Seguire una linea
Ogni linea parte su un cerchietto di 5 pixel intorno al polo positivo e segue la direzione del campo a piccoli passi, col metodo del punto medio, fino a un polo negativo o fuori dal riquadro. Il passo è un quinto della distanza dal polo più vicino, fra 1,6 e 6 pixel: fitto vicino ai poli, largo lontano. Tutto si ricalcola a ogni fotogramma.
Lo spessore e la luce
Ogni tratto va in uno di quattro spessori secondo la distanza dai poli, e ogni spessore è un solo Path2D: quattro tratti in tutto, non migliaia. Il filo di luce sono trattini di 5 pixel ogni 70, che avanzano lungo la lunghezza della linea col tempo.
Lo scambio dei poli
Premere porta s da 1 a meno 1 con elastic.out: la carica passa per lo zero, dove le linee si spengono, e va un poco oltre prima di posarsi. Le linee partono sempre dal polo che in quel momento è positivo, quindi si riaprono dall’altra parte da sole.
Accessibile
È un button vero con aria-pressed, e una riga aria-live annuncia Connected. Il campo è un disegno: ha aria-hidden e non riceve il puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Connect | La scritta a riposo. |
DONE | script.js | Connected | La scritta a pulsante premuto. |
NOTE | script.js | Desk speaker · nearby | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | Desk speaker · paired | La riga piccola a pulsante premuto. |
LINEE | script.js | 22 | Quante linee partono dal polo positivo. |
FORZA | script.js | 0.55 | Quanto tira il polo del puntatore. |
FLUSSO | script.js | 30 | La velocità della luce lungo le linee, in pixel al secondo. |
SCAMBIO | script.js | 1.1 | Quanto dura lo scambio dei poli, in secondi. |
Quando usarla
Per un pulsante che collega due cose: abbinare un altoparlante o delle cuffie, collegare un account o un dispositivo, attivare un sensore, unirsi a una sessione. Sta bene nell’app di un oggetto connesso o nella pagina di un prodotto tecnologico.
Sul telefono
Il riquadro del campo si misura sulla larghezza e sull’altezza dello schermo e la pillola si stringe fino al 52% della larghezza; i poli si ricalcolano sulla pillola vera. Il dito piega le linee mentre si muove sopra il campo, e il tocco scambia i poli come il clic; la scritta si allarga solo col mouse.
Con il movimento ridotto
Il campo è disegnato fermo, senza filo di luce e senza il polo del puntatore; premuto, i poli si scambiano in un colpo e le parole si scambiano in dissolvenza.
Trappole
- Le linee vanno disegnate in pochi percorsi: un tratto per ogni segmento sono migliaia di stroke a fotogramma, e il telefono rallenta. Qui ogni spessore è un Path2D e l’accento ne ha tre.
- Quando la carica passa per lo zero il campo è quasi solo quello del puntatore e le linee impazziscono: per questo la loro opacità segue la forza della carica e si spengono proprio lì.
- I poli stanno al centro delle punte tonde, cioè a metà larghezza meno metà altezza della pillola: si ricalcolano al resize, perché sul telefono la pillola è più stretta.
- Una maschera radiale sul canvas toglie il bordo del riquadro: senza, le linee che escono finiscono tagliate dritte.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 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.
