Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il pulsante al neon
L’insegna al neon di un ristorante, Book a table, è il pulsante: i tubi si accendono come i neon veri, uno per volta con uno sfarfallio irregolare, e uno di loro fatica prima di prendere. Sotto l’insegna il suo riflesso trema come sull’asfalto bagnato, rotto dalle increspature. Premuta, l’insegna si spegne morendo tubo per tubo e si riaccende in altri colori mentre il tavolo viene prenotato.
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 neon sign button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-scene data-scheme="0">
<div class="piece" data-piece>
<!-- the sign is the button: glass tubes on a clear plate, lit by the script one tube at a time -->
<button class="sign" type="button" aria-label="Book a table" aria-describedby="sign-status" data-sign data-autoclic>
<span class="sign__body" data-body aria-hidden="true"></span>
</button>
<!-- the sign shining back from under it, as from wet ground: drawn by the script, row by row -->
<canvas class="mirror" data-mirror aria-hidden="true"></canvas>
<p class="status" id="sign-status" aria-live="polite">
<span data-status>Kitchen open till 11 pm</span>
</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 al neon» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una lastra trasparente avvitata ai quattro angoli porta un’insegna al neon: una cornice di tubo azzurro con gli angoli tondi, Book a table scritto in corsivo in un tubo rosa, e un calice nel varco in basso della cornice. Subito sotto c’è il suo riflesso, come su un asfalto bagnato, e più giù la riga Kitchen open till 11 pm. All’apertura gli elettrodi alle estremità dei tubi si scaldano e brillano, poi ogni tubo si accende per conto suo con qualche lampo irregolare, e uno di loro, mai lo stesso, sfarfalla debole per più di un secondo prima di prendere. Man mano l’insegna compare capovolta nel riflesso, più corta, mossa dalle increspature, rotta in strisce e sempre più tenue verso il basso. Col puntatore sopra l’alone dei tubi si fa più luminoso e il tubo pigro ha un singhiozzo; ogni tanto ce l’ha anche da solo. Premendo, ogni tubo muore al suo momento con un ultimo lampo e la sua luce si spegne mentre gli elettrodi restano accesi ancora un attimo; la riga dice Finding you a table. Dopo un momento di buio l’insegna si riaccende con lo stesso sfarfallio nei colori successivi (ambra e rosso, poi menta e viola, poi di nuovo rosa e azzurro), e la riga dice Booked: table for two, 8:30 pm nel colore delle parole dell’insegna; poco dopo torna a Kitchen open till 11 pm.
Come funziona
I tubi disegnati a mano
Le lettere sono tracciati SVG scritti a mano, un tratto continuo per tubo come si piega il vetro vero: ogni lettera intorno alla sua origine sulla linea di base, poi spostata al suo posto da una funzione che somma l’offset a tutte le coppie di coordinate. Ogni tubo ha il vetro spento con un filo di riflesso, e alle due estremità, misurate con getPointAtLength, un cappuccio scuro dove il tubo entra nella lastra verso l’elettrodo.
Un numero per tubo
La luce di un tubo è due strati SVG sopra il vetro: il tubo acceso (un tratto largo e tenue, il colore, un’anima quasi bianca) e un alone sfocato con un filtro CSS. Lo sfarfallio cambia solo un numero per tubo, che a ogni fotogramma diventa l’opacità dei due strati: il browser non deve mai ridisegnare il bagliore, solo mescolarlo, e uno sfarfallio di cinquanta colpi costa come uno solo.
Come si accende un neon
Per ogni tubo una timeline di GSAP fa scaldare gli elettrodi, poi da 1 a 4 lampi (per FLICKER) di durate e pause casuali, e infine lo tiene acceso. Uno dei tubi segnati come pigri, scelto a caso ma mai quello della volta prima, fa LAZY secondi di colpi deboli e fitti che si fanno più forti e più vicini verso la fine. Spegnendosi ogni tubo ha un ultimo lampo, scende con power2.out, e i suoi elettrodi restano accesi un po’ più a lungo.
Il riflesso
Il riflesso è una tela sotto l’insegna, larga quanto lei: il suo bordo alto è l’orlo dell’acqua, e la tela è alta quanto basta per la metà bassa dell’insegna capovolta e accorciata (0,74, come vista dall’alto). I tubi accesi si ridisegnano piccoli e sfocati solo quando cambiano; poi, trenta volte al secondo, la tela copia una riga dell’insegna capovolta ogni due pixel, spostata di lato da tre onde lente, più chiara o più scura a strisce e sempre più tenue verso il fondo. Mentre l’insegna è spenta la tela non si ridisegna.
I colori e gli stati
I colori stanno nel CSS in tre coppie (parole e cornice) e data-scheme sceglie quella accesa: si cambia mentre l’insegna è buia, così si riaccende direttamente nei colori nuovi, e lo script li rilegge dal CSS per il riflesso. Il pulsante è un button con aria-label Book a table; durante la prenotazione ha aria-busy e la riga sotto, aria-live, dice a che punto è.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FLICKER | script.js | 1 | Quanto sfarfallano i tubi prima di prendere: 0 per niente, 2 tanto. |
LAZY | script.js | 1.3 | I secondi in cui il tubo pigro fatica prima di prendere. |
DIE | script.js | 0.7 | I secondi in cui l’insegna si spegne quando è premuta. |
DARK | script.js | 0.45 | I secondi di buio prima che si riaccenda nei colori successivi. |
GLOW | script.js | 1 | Quanto è forte il bagliore intorno ai tubi. |
RIPPLE | script.js | 1 | Quanto le increspature muovono il riflesso sotto l’insegna. |
BOOKED | script.js | Booked: table for two, 8:30 pm | Che cosa dice la riga sotto l’insegna a prenotazione fatta. |
DONE | script.js | 3.4 | I secondi in cui la riga dice Booked prima di tornare com’era. |
Quando usarla
Per l’azione principale del sito di un ristorante, un cocktail bar, un locale con musica dal vivo o una sala giochi: prenota, entra, compra il biglietto. Vuole una pagina scura tutta per sé, come l’apertura del sito; in mezzo ad altri contenuti si mangerebbe tutto.
Sul telefono
L’insegna si stringe alla larghezza dello schermo meno 32 pixel e il riflesso si ricalcola sulla misura vera, largo quanto lei e più basso in proporzione; la riga sotto si stringe un poco. Il tocco fa quello che fa il clic: l’insegna si spegne e si riaccende nei colori nuovi.
Con il movimento ridotto
Niente sfarfallio e niente lampi: l’insegna si accende e si spegne in dissolvenze morbide, i colori cambiano lo stesso, il riflesso sta fermo senza increspature e il pulsante premuto non si stringe.
Trappole
- Uno sfarfallio fatto cambiando i colori o i filtri dei tubi faceva ridisegnare al browser il bagliore sfocato a ogni colpo e la pagina si inceppava; ora ogni tubo ha il suo strato già disegnato e cambia solo l’opacità.
- L’alone di un tubo si riscriveva solo quando cambiava la luce del tubo, così col puntatore sopra l’insegna non si schiariva: ora l’alone ricorda il suo ultimo valore scritto e si aggiorna anche quando cambia solo il passaggio del puntatore.
- Il riflesso disegnato a piena densità su una tela larga quanto la pagina costava più di tutto il resto insieme: ora la tela è larga quanto l’insegna, a un pixel per pixel, si ridisegna trenta volte al secondo e mai quando l’insegna è spenta.
- La sfocatura del riflesso era in pixel fissi e sul telefono, con l’insegna piccola, impastava tutto: ora è una parte della larghezza dell’insegna.
- Un’insegna premuta si stringe con un transform, e le misure prese con getBoundingClientRect in quel momento davano un riflesso più piccolo: la larghezza si prende con offsetWidth, che non risente delle trasformazioni.
Librerie
GSAP 3.15.0, Big Shoulders Display (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 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.
