Il pulsante al plasma

Pulsanti, Hover, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 8,7 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Connect di un’app, su fondo nero: una pillola di vetro scuro con un piccolo elettrodo che brilla nella sua camera. Quando il puntatore si avvicina, fulmini di plasma viola e azzurri partono dall’elettrodo e lo cercano, ramificandosi e tremolando; sopra il pulsante gli si attaccano. Premuto, tutti i fulmini si fondono in un arco solo che riempie la pillola, un lampo, e la scritta diventa Connected con una spina. Al telefono i fulmini seguono il dito.

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 plasma button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the plasma button: a pill of dark glass with a glowing electrode in it. Near the pointer, bolts of violet and
         blue plasma leave the electrode and reach for it; pressed, they melt into one arc and the account is
         connected. The bolts are drawn on the canvas, under the button and the words -->
    <div class="plasma" data-plasma>
      <canvas class="plasma__arcs" aria-hidden="true" data-arcs></canvas>
      <button class="plug" type="button" aria-label="Connect your workspace" aria-describedby="plasma-note" data-plug data-autoclic>
        <span class="plug__glass" aria-hidden="true"></span>
        <span class="plug__slot" aria-hidden="true" data-slot>
          <svg class="plug__icon" viewBox="0 0 24 24" data-icon><path d="M9 3.5v4.5M15 3.5v4.5M6.5 8h11v3.2a5.5 5.5 0 0 1-11 0zM12 16.7v3.8"/></svg>
        </span>
        <span class="plug__words" aria-hidden="true"><span class="plug__word" data-word>Connect</span></span>
        <span class="plug__flash" aria-hidden="true" data-flash></span>
      </button>
      <p class="plasma__note" id="plasma-note" data-note>Link your workspace to sync files and calendars</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.

17 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 al plasma» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola di vetro scuro, col riflesso sul bordo alto e un alone viola sotto; a sinistra, in una piccola camera incassata, un elettrodo: un filamento verticale bianco e azzurro in una nebbia viola. Accanto la scritta Connect e sotto la riga grigia Link your workspace to sync files and calendars. A riposo un paio di fili di plasma sottili strisciano piano dall’elettrodo verso l’interno del vetro. Avvicinando il mouse partono i fulmini: prima uno, che si allunga verso il puntatore senza arrivarci, poi altri, più luminosi, che lo raggiungono, si ramificano e tremolano, ridisegnati a ogni fotogramma; il bordo del vetro si accende dal lato del puntatore. Sopra il pulsante i fulmini si attaccano al puntatore e diventano più fitti. Premendo, la scritta diventa Connecting e i fulmini si piegano tutti verso il fondo della pillola, si raddrizzano e si fondono in un arco solo, spesso, che la riempie; poi un lampo bianco dentro il vetro, l’elettrodo si spegne e al suo posto si accende una spina azzurra, con la scritta azzurra Connected e la riga Syncing files and calendars. Col mouse sopra, la scritta dice Disconnect; premendo di nuovo l’elettrodo si riaccende e torna Connect. Al telefono i fulmini seguono il dito finché tocca, e il tocco sul pulsante collega.

Come funziona

Un fulmine, dimezzando

Ogni fulmine nasce dalla retta fra l’elettrodo e il puntatore. Lo spostamento del punto medio la taglia a metà più volte (finché i pezzi sono di circa cinque pixel) e sposta ogni nuovo punto di lato, a caso, di al massimo JAGGED volte la lunghezza del pezzo che taglia: così il fulmine è storto a ogni scala, come uno vero. Da punti a caso partono FORKS rami, girati di 20-55 gradi, più corti e più tenui.

Rifatto a ogni fotogramma

I fulmini non si animano: si buttano via e si rifanno a ogni fotogramma, con un po’ di luminosità a caso (FLICKER), e il tremolio viene da lì. Quanti sono e quanto arrivano lontano dipende dalla distanza del puntatore dall’elettrodo: oltre REACH niente, a metà strada un fulmine che resta corto, vicino BOLTS fulmini che lo toccano, sopra il pulsante uno in più e con la punta ferma sul puntatore.

Tre passate di luce

Ogni fulmine si disegna più volte su un canvas con la composizione additiva 'lighter', così dove i fulmini si incrociano la luce si somma: un alone largo viola e uno azzurro su un canvas grande un quarto, poi steso su tutto (una sfocatura che non costa niente), un corpo colorato di due-quattro pixel e un nucleo bianco di un pixel. Quando i fulmini sono tanti, l’alone di ciascuno si divide, perché insieme non diventino una macchia bianca.

Il vetro sotto, la scritta sopra

Il pulsante non fa uno strato suo: il vetro sta sotto il canvas dei fulmini e la scritta sopra, con un’ombra scura che la tiene leggibile anche su un fulmine. Per questo premuto non si rimpicciolisce il pulsante intero (lo porterebbe sopra i fulmini), solo il vetro. Il bordo del vetro è un gradiente radiale mascherato, il cui centro segue il puntatore attraverso due variabili CSS.

La fusione e il lampo

Premendo, un tween porta una variabile da 0 a 1 in CONNECT secondi: i fulmini diminuiscono, la loro punta va dal puntatore al fondo della pillola, la loro storta si riduce e lo spessore cresce, finché resta un arco solo. Alla fine un lampo bianco dentro il vetro e uno sul canvas, e la spina SVG prende il posto dell’elettrodo. Lontano dal pulsante e senza plasma il canvas non si ridisegna; i fili lenti a riposo cambiano forma solo nove volte al secondo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`REACH`	script.js	`420`	Fin dove possono arrivare i fulmini dall’elettrodo, in pixel.
`BOLTS`	script.js	`4`	Quanti fulmini cercano un puntatore vicino.
`JAGGED`	script.js	`0.32`	Quanto sono storti i fulmini (0 = linee dritte).
`FORKS`	script.js	`2`	Quanti rami butta ogni fulmine.
`FLICKER`	script.js	`0.35`	Quanto tremola la luce dei fulmini.
`IDLE`	script.js	`2`	I fili lenti dentro il vetro a riposo (0 = nessuno, fermo del tutto).
`CONNECT`	script.js	`0.9`	I secondi dalla pressione a Connected.

Provali nel Playground

Quando usarla

Per il momento in cui si collega qualcosa: un account, un’integrazione, un dispositivo, un portafoglio, una sorgente di dati. Sta bene su un fondo scuro, in una pagina di onboarding o nel pannello delle integrazioni, dove il gesto di collegare merita un po’ di spettacolo.

Sul telefono

La pillola si stringe un poco (alta 80 pixel) e il campo dei fulmini prende tutta la larghezza. Senza mouse i fulmini seguono il dito finché tocca il campo intorno al pulsante (lì la pagina non scorre col dito); il tocco sul pulsante collega e scollega.

Con il movimento ridotto

Niente fulmini né fili: l’elettrodo resta acceso e fermo, e col puntatore vicino si fanno più luminosi soltanto lui e il bordo del vetro. Premendo, un lampo tenue in dissolvenza e la scritta diventa Connected con la spina, senza movimento.

Trappole

Col canvas sotto tutto il pulsante, il vetro scuro copriva i fulmini e sembravano spenti: il pulsante non fa uno strato suo, il vetro sta sotto il canvas e la scritta sopra.
Un transform: scale sul pulsante premuto crea uno strato nuovo e lo porta sopra il canvas, e per un istante i fulmini sparivano sotto il vetro: premuto si rimpicciolisce solo il vetro.
Cinque fulmini vicini sommati con 'lighter' diventavano una macchia bianca dietro la scritta: l’alone di ciascuno si divide per la radice di quanti sono.
Il lampo sopra la scritta la copriva: sta sotto la scritta, che ha anche un’ombra scura per restare leggibile sopra un fulmine.
Collegato, l’elettrodo sbiadito restava disegnato sul canvas e tagliava la spina a metà: collegato non si disegna più.
Al telefono pointermove arriva solo col dito appoggiato: il campo intorno al pulsante ha touch-action none, e i fulmini seguono il dito fra pointerdown e pointerup.

Librerie

GSAP 3.15.0, Sora (font variabile) 5.3.0.

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

Collaudo

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