Il pulsante della lampadina a filamento

Pulsanti, SVG, HoverGSAP, Solo CSSMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero: il Turn on di una lampada, una pillola grafite con dentro una piccola lampadina disegnata a linee sottili. Sotto il puntatore il filamento si scalda dal grigio a un arancio spento e trema appena, come su un variatore. Premuto, la lampadina si accende come una vera, con due guizzi prima di tenere: il filamento diventa bianco ambra, un alone caldo e morbido cresce dalla lampadina e riempie la pillola, la luce si sparge intorno e la scritta diventa On. Premuto di nuovo, l’alone si spegne e il filamento si raffredda piano, restando tiepido un attimo.

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 filament bulb 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 filament bulb button: a dark pill on black with a small line drawn bulb on the left. Under the pointer the
         filament warms up; pressed, the bulb lights and a soft warm glow fills the pill; pressed again, it fades out
         and the filament stays warm for a moment -->
    <div class="lamp" data-lamp>
      <div class="lamp__halo" data-halo aria-hidden="true"></div>
      <button class="lamp__btn" type="button" data-btn data-autoclic aria-pressed="false">
        <span class="lamp__glow" data-glow aria-hidden="true"></span>
        <span class="lamp__shine" aria-hidden="true"></span>
        <svg class="lamp__bulb" viewBox="0 0 24 34" aria-hidden="true" data-bulb>
          <path class="lamp__fill" data-fill d="M12 2.5c-4.7 0-8 3.4-8 7.8 0 2.9 1.5 4.7 2.9 6.3 1 1.1 1.6 2.2 1.6 3.6v1.3h7v-1.3c0-1.4.6-2.5 1.6-3.6 1.4-1.6 2.9-3.4 2.9-6.3 0-4.4-3.3-7.8-8-7.8Z"></path>
          <path class="lamp__glass" data-glass d="M12 2.5c-4.7 0-8 3.4-8 7.8 0 2.9 1.5 4.7 2.9 6.3 1 1.1 1.6 2.2 1.6 3.6v1.3h7v-1.3c0-1.4.6-2.5 1.6-3.6 1.4-1.6 2.9-3.4 2.9-6.3 0-4.4-3.3-7.8-8-7.8Z"></path>
          <path class="lamp__wire" d="M10.2 21.4V14.6 M13.8 21.4V14.6"></path>
          <path class="lamp__coil" data-coil d="M10.2 14.6l.3-2.6.4 1.7.4-1.7.4 1.7.4-1.7.4 1.7.4-1.7.4 1.7.25-1.7.25 2.6"></path>
          <path class="lamp__base" d="M8.6 23.6h6.8 M8.9 25.8h6.2 M9.4 28h5.2 M10.7 30.3h2.6"></path>
          <path class="lamp__spec" data-spec d="M7.3 9.6c.3-2 1.6-3.6 3.4-4.2"></path>
        </svg>
        <span class="lamp__words" data-words><span class="lamp__word" data-word>Turn on</span></span>
      </button>
      <p class="lamp__note" data-note>Desk lamp · off</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.

19 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 della lampadina a filamento» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola grafite alta 64 pixel, col contorno sottile e una riga di luce sul bordo alto come una lacca; a sinistra una piccola lampadina disegnata a linee sottili, col vetro, i due fili di sostegno, il filamento a spirale e l’attacco a vite, e accanto Turn on in Archivo. Sotto, la riga piccola Desk lamp · off. Passandoci sopra la pillola cresce di poco su una molla, la scritta si allarga e prende peso, e il filamento si scalda dal grigio a un rosso spento, tremando appena come una lampadina su un variatore. Premuta, la pillola cede e torna con un rimbalzo; la lampadina si accende come una vera, con due guizzi prima di tenere: il filamento diventa bianco ambra e più spesso, il vetro si riempie di un calore leggero e il suo riflesso si accende, un alone morbido cresce dalla lampadina fino a riempire la pillola, va un filo oltre e si assesta, e fuori dalla pillola si sparge una luce calda. La scritta diventa On e la pillola si stringe intorno con un rimbalzo, la riga sotto dice Desk lamp · 2700 K. Premuta di nuovo, l’alone si spegne in un secondo e il filamento si raffredda su una curva lunga: scende subito a un rosso spento e resta tiepido un attimo prima di tornare grigio.

Come funziona

Il calore è un numero

Il colore del filamento è un numero solo, heat, da 0 a 1, passato su cinque tappe: grigio freddo, rosso spento, arancio, ambra, bianco ambra. Lo scrive gsap.utils.interpolate fra la tappa prima e quella dopo, a ogni fotogramma, e lo stesso numero ingrossa un poco il tratto del filamento.

Due guizzi prima di tenere

L’accensione è una timeline di cinque passi da pochi centesimi: il calore sale a 0,74, scende a 0,38, risale a 0,86, ricade a 0,6 e solo allora arriva a 1 con power2.out. È il guizzo di una lampadina vera che prende; l’alone parte dopo, quando la luce tiene.

Un alone dentro e una luce fuori

Dentro la pillola, che ha overflow hidden, c’è un cerchio largo 360 pixel con un gradiente radiale caldo, centrato sulla lampadina: cresce da 0,2 a 1,06 e si assesta a 1. Fuori, dietro la pillola, un’ellisse sfocata con lo stesso calore si accende piano: è la luce che si sparge sul tavolo.

Raffreddarsi piano

Allo spegnimento l’alone se ne va in poco più di mezzo secondo, mentre il calore del filamento torna a zero in COOL secondi con power2.out: la curva scende presto e poi rallenta, così il filamento resta rosso spento per un attimo, come un tungsteno vero.

La pillola che si stringe

Le parole cambiano lunghezza, Turn on e On: la pillola misura la sua larghezza prima e dopo il cambio e passa dall’una all’altra con back.out(2.4), mentre la scritta nuova arriva stretta e si allarga sull’asse wdth di Archivo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Turn on`	Le parole a luce spenta.
`LABEL_ON`	script.js	`On`	Le parole a luce accesa.
`NOTE`	script.js	`Desk lamp · off`	La riga piccola sotto la pillola, a luce spenta.
`NOTE_ON`	script.js	`Desk lamp · 2700 K`	La riga piccola a luce accesa.
`WARM`	script.js	`0.32`	Quanto si scalda il filamento sotto il puntatore, da 0 freddo a 1 acceso.
`GLOW`	script.js	`1`	Quanto è forte l’alone caldo dentro la pillola.
`COOL`	script.js	`2.2`	I secondi che il filamento impiega a raffreddarsi.
`FLICKER`	script.js	`0.07`	Quanto trema il filamento mentre si scalda.

Provali nel Playground

Quando usarla

Per un pulsante che accende qualcosa: la luce di una casa smart, l’interruttore di un’app della domotica, il tema chiaro di un sito, il Turn on di un prodotto che si illumina, la prova di una lampada in un negozio di illuminazione.

Sul telefono

La pillola resta della stessa misura e sta larga nella casella; il tocco accende e spegne come il clic. Il filamento che si scalda al passaggio c’è solo col mouse.

Con il movimento ridotto

Niente molle né guizzi: il filamento, l’alone e la luce intorno passano da spenti ad accesi in dissolvenza, e le parole si scambiano senza rimbalzi.

Trappole

Un alone che riempie la pillola senza uscirne: il cerchio sta dentro il pulsante con overflow hidden e isolation; la luce che si sparge fuori è un altro elemento, dietro, sfocato.
La pillola cambia larghezza col testo: si misura prima e dopo aver cambiato le parole e si anima la larghezza in pixel, poi si toglie lo stile in linea, così al resize torna a seguire il testo.
Niente pallino che pulsa: la luce si accende, va un filo oltre e si assesta, poi resta ferma. Il tremolio c’è solo mentre il filamento si scalda, ed è un rumore lento e piccolo.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,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.