Il pulsante col bordo di luce

Pulsanti, Hover, FisicaGSAP, CanvasImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Un pulsante scuro con due raggi di luce che corrono lungo il bordo: quando il puntatore si avvicina i raggi scivolano verso di lui su una molla e si piegano fuori dal bordo per raggiungerlo, dentro si accende una luce morbida. Premuto, un’onda di luce corre in tutte e due le direzioni lungo il bordo e i raggi accelerano finché lo spazio di lavoro è pronto.

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 light beam button</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">
    <div class="cta" data-cta>
      <!-- the button: a beam of light runs round its border and swings to the pointer; inside, a soft light under the
           pointer with dust drifting through it. The border, the light and the dust are drawn by the script -->
      <div class="slot" data-slot>
        <button class="beam" type="button" aria-describedby="cta-note" data-btn>
          <span class="beam__face" aria-hidden="true">
            <canvas class="beam__inside" data-inside></canvas>
          </span>
          <span class="beam__labels">
            <span class="beam__label" data-label="idle">Get started<svg class="beam__arrow" viewBox="0 0 16 16" aria-hidden="true"><path class="beam__stem" d="M2.5 8h9"/><path class="beam__tip" d="M7.5 3.5 12 8l-4.5 4.5"/></svg></span>
            <span class="beam__label" data-label="busy" aria-hidden="true">Creating workspace&hellip;</span>
            <span class="beam__label" data-label="done" aria-hidden="true"><svg class="beam__check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.4 6.4 11.6 13 4.6" pathLength="1" data-check/></svg>You're in</span>
          </span>
          <canvas class="beam__bloom" data-bloom aria-hidden="true"></canvas>
          <canvas class="beam__rim" data-rim aria-hidden="true"></canvas>
        </button>
      </div>
      <!-- the line under the button: empty at rest, it says what the button is doing -->
      <p class="cta__note" id="cta-note"><span data-note></span></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.

26 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 «Il pulsante col bordo di luce» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante di vetro scuro con gli angoli tondi: Get started con una freccia. Due raggi di luce girano lungo il bordo, ognuno con una testa bianca e una coda che sfuma dal lilla all’azzurro. Quando il puntatore arriva a meno di 90 pixel, i due raggi lasciano il loro giro e scivolano su una molla fino a stringerlo come un compasso, uno sopra e uno sotto, o tutti e due attorno all’estremità tonda se il puntatore è oltre il lato; la loro luce si piega fuori dal bordo verso il puntatore. Dentro il pulsante si accende una luce morbida sotto il puntatore; la freccia allunga il suo gambo. Premendo, dal punto toccato parte un’onda di luce che corre lungo il bordo nelle due direzioni e si incontra dall’altra parte con un lampo; i raggi lasciano il puntatore e corrono quattro volte più veloci, la scritta diventa Creating workspace… e sotto il pulsante compare la riga This takes a few seconds. Click again to cancel. Dopo un paio di secondi un’onda verde, il bordo diventa verde e compare una spunta che si disegna: You’re in, e la riga sotto dice We sent a sign-in link to your inbox. Poco dopo torna tutto com’era e la riga sotto sparisce. Cliccando mentre lavora, la luce si abbassa per un attimo e per un paio di secondi la riga dice Cancelled. Nothing was created.

Come funziona

Il bordo misurato in lunghezza

Il bordo è un rettangolo con gli angoli tondi percorso per lunghezza: una funzione dà il punto a s pixel dall’angolo in alto a sinistra, passando per i quattro lati e i quattro quarti di cerchio. Un raggio è solo un numero su quel giro e una velocità. Si disegna su una tela come una fila di trattini lunghi 2,5 pixel, ognuno col suo colore e la sua opacità: la testa bianca, poi il colore --tint, poi --tail che sfuma a zero, e sotto un secondo tratto largo e tenue che dà corpo alla coda. Una copia della tela, sfocata dal CSS e messa in screen, è l’alone.

Il compasso e la molla

Dal puntatore si trovano due punti del bordo: sopra e sotto di lui finché sta sopra i lati lunghi, e a specchio intorno all’estremità tonda quando la oltrepassa. Gli stessi due punti dentro e fuori dal pulsante, così niente salta quando il puntatore passa il bordo. All’inizio della presa ogni raggio prende il punto più vicino (la coppia si scambia se costa meno strada) e lo tiene. A ogni fotogramma l’accelerazione è una miscela fra la velocità di crociera e una molla di forza SWING verso il suo punto, pesata da quanto il puntatore è vicino; il passo è limitato a 1/30 di secondo.

La luce che si piega

Mentre il puntatore tiene i raggi, i punti vicini alla testa si spostano verso di lui fino a BEND pixel, sempre meno lungo la coda (al quadrato): la luce si stacca dal bordo e si sporge. Anche l’alone ha un bagliore in più spinto dalla testa verso il puntatore.

La luce dentro

Una seconda tela, tagliata dalla forma del pulsante, ha un gradiente radiale che insegue il puntatore. Sulla stessa tela possono vagare DUST granelli di polvere (di serie nessuno), frenati dall’aria e spinti dal puntatore che li attraversa: ognuno è acceso solo dalla luce che lo raggiunge, una gaussiana intorno al puntatore e una intorno a ogni testa, e fuori dalla luce non si vede.

L’onda e gli stati

Premere lancia un’onda dal punto toccato: due fronti che vanno in direzioni opposte per metà del giro con power2.out e lasciano dietro un anello tenue, con un lampo dove si incontrano. Poi un delayedCall fa il lavoro finto: i raggi lasciano il puntatore e la loro crociera sale di RUSH volte, la scritta cambia scivolando e sfocandosi, aria-busy è vero e una regione aria-live lo dice. Alla fine un’onda verde, la spunta col suo stroke-dashoffset e il ritorno; un clic durante il lavoro annulla.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LAP`	script.js	`3.4`	I secondi che un raggio impiega a fare il giro del bordo, a riposo.
`BEAMS`	script.js	`2`	Quanti raggi corrono lungo il bordo.
`TAIL`	script.js	`0.4`	Quanto è lungo un raggio, come parte del bordo.
`SWING`	script.js	`[150, 13]`	La molla che porta i raggi al puntatore: quanto è rigida e quanto li frena.
`REACH`	script.js	`90`	A quanti pixel dal pulsante il puntatore comincia a tirare i raggi.
`BEND`	script.js	`9`	Di quanti pixel la luce si stacca dal bordo verso il puntatore.
`RUSH`	script.js	`4`	Quante volte più veloci corrono i raggi mentre lo spazio di lavoro si prepara.
`DUST`	script.js	`0`	Quanti granelli di polvere vagano nella luce dentro il pulsante: di serie nessuno.
`WORK`	script.js	`2.4`	I secondi dell’iscrizione finta.
`DONE`	script.js	`2.8`	I secondi in cui il pulsante dice You’re in prima di tornare com’era.

Provali nel Playground

Quando usarla

Per l’azione principale di una landing scura: iscriviti, prova gratis, scarica l’app. Vuole un fondo scuro e calmo e un pulsante solo così per pagina; accanto a un pulsante secondario semplice risalta ancora di più.

Sul telefono

Il pulsante e la riga sotto stanno in uno schermo da 390 pixel. Senza un puntatore che si avvicina i raggi girano da soli; il tocco accende la luce dentro dove tocca il dito per un momento, e l’onda parte proprio da lì.

Con il movimento ridotto

I raggi stanno fermi al loro posto e il pulsante non si stringe. La luce dentro c’è ancora sotto il puntatore; la pressione accende tutto il bordo in una volta e lo fa svanire invece di far correre l’onda, e le scritte cambiano in dissolvenza.

Trappole

Cercare il punto del bordo con l’angolo dal centro andava bene dentro il pulsante ma non fuori, e quello più vicino andava bene fuori ma non dentro: passando il bordo i raggi saltavano dall’altra parte. Il compasso (sopra e sotto, a specchio sulle estremità tonde) dà gli stessi punti dentro e fuori.
Con due raggi che inseguono lo stesso punto, il secondo arrivava sopra il primo e se ne vedeva uno solo; un raggio che sceglieva il lato da cui era arrivato ne lasciava uno indietro. Ora la coppia di punti si assegna una volta all’inizio della presa, nel modo che costa meno strada.
Le misure si prendono con offsetWidth, non con getBoundingClientRect: il pulsante si stringe quando è premuto, e misurato rimpicciolito avrebbe ridisegnato il bordo più piccolo del vero.
Le tele sono disegnate a densità doppia e la loro misura in pixel CSS si scrive a mano; senza, su un telefono i raggi esili sembravano sfocati.
I colori dei raggi vengono dalle variabili CSS, lette con un contesto 2D di prova (fillStyle riscrive qualunque colore in esadecimale o rgba) e rilette ogni tanto: così cambiano anche dal vivo nel Playground.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0.

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

Collaudo

Provata il 12 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.