Il pulsante dell'insegna a punti

Pulsanti, Hover, TestoGSAP, CanvasMediaPeso compresso: Demo 5,3 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero: l’Open now di una tavola calda inventata è un’insegna a matrice di punti, le parole fatte di quadratini, spenti e grigio scuro. Passandoci sopra le lettere si accendono in ambra una colonna dopo l’altra, e ogni quadratino brilla un attimo di più prima di posarsi. Premuto, il pulsante scorre come un tabellone, una colonna alla volta, mostra See you e torna su Open now.

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 dot matrix sign 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 dot matrix sign button: the words are a grid of small square cells, dark when off. Under the pointer the
         cells of the letters light up in amber, column after column, each settling after a tiny overshoot. Pressed,
         the sign scrolls like a departure board, a whole column at a time, shows the second message and comes back -->
    <div class="sign" data-sign>
      <p class="sign__brand">Corvo Diner</p>
      <button class="sign__btn" type="button" data-btn data-autoclic aria-pressed="false">
        <span class="sign__glass" aria-hidden="true"></span>
        <canvas class="sign__cells" data-cells aria-hidden="true"></canvas>
        <span class="sr" data-label>Open now</span>
      </button>
      <p class="sign__note" data-note>Kitchen open till eleven</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.

21 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 dell'insegna a punti» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero il nome piccolo Corvo Diner, sotto un pannello quasi nero con un bordo di un pixel e una riga di riflesso in alto, e sopra il pannello una griglia di quadratini: quelli che formano OPEN NOW, in un carattere a matrice di cinque per sette disegnato a mano, sono grigio caldo, gli altri quasi neri. Sotto, la riga Kitchen open till eleven. Passandoci sopra il bordo si schiarisce e le lettere si accendono in ambra, una colonna dopo l’altra da sinistra; ogni quadratino arriva un poco più chiaro del suo colore e si posa, e acceso ha un centro più chiaro, come una piccola lampada quadrata. Premuto, il pannello cede e torna con una molla e la scritta scorre verso sinistra una colonna intera alla volta, come un tabellone: arriva SEE YOU, la riga sotto diventa ambra e dice Thanks for coming by, poi la scritta scorre ancora e torna OPEN NOW.

Come funziona

Un carattere di cinque per sette

Ogni lettera è una stringa di sette righe da cinque segni, un cancelletto per il quadratino acceso. Lo script trasforma le parole in una lista di colonne di sette valori, con una colonna vuota fra una lettera e l’altra, e centra le due scritte su una larghezza comune.

Una striscia sola

Le colonne stanno in una striscia: Open now, uno spazio, See you, uno spazio e di nuovo Open now. Lo scorrimento è un numero solo che GSAP porta avanti in modo lineare; il disegno ne prende la parte intera, così la scritta salta di una colonna alla volta come un tabellone vero, e alla fine torna a zero senza che si veda.

L’onda dell’accensione

Anche la luce è un numero da 0 a 1. Ogni colonna lo legge in ritardo secondo la sua posizione, e la sua luce segue la curva di back.out: supera il pieno e torna giù, quindi ogni quadratino brilla un attimo di più prima di posarsi. Sopra il pieno il colore va verso l’ambra chiaro.

Quadratini, non pallini

Le celle sono quadrati con gli angoli appena smussati e niente alone: acceso, un quadratino ha un centro più chiaro, come una lampadina vista da vicino. Niente si accende o pulsa da solo.

Accessibile

È un button vero con aria-pressed e il testo nascosto per lo screen reader; una riga aria-live dice See you. Durante lo scorrimento i clic si ignorano. Col movimento ridotto la scritta cambia senza scorrere e le righe cambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`OPEN NOW`	Le parole dell’insegna a riposo.
`DONE`	script.js	`SEE YOU`	Le parole a cui scorre l’insegna quando la premi.
`NOTE`	script.js	`Kitchen open till eleven`	La riga piccola sotto l’insegna.
`NOTE_DONE`	script.js	`Thanks for coming by`	La riga piccola mentre si vedono le seconde parole.
`WAVE`	script.js	`0.016`	I secondi fra una colonna che si accende e la successiva.
`SPEED`	script.js	`46`	Quante colonne scorre l’insegna in un secondo.
`HOLD`	script.js	`1.6`	I secondi in cui restano le seconde parole prima di tornare.
`SETTLE`	script.js	`1.7`	Quanto brilla oltre il pieno un quadratino prima di posarsi (0 per niente).

Provali nel Playground

Quando usarla

Per il pulsante di un locale aperto la sera, dove una scritta luminosa è a casa: una tavola calda, un bar, un cinema, un negozio di dischi, la prenotazione di un ristorante. Va bene anche come pulsante Apri o Entra di un sito con un’aria da insegna.

Sul telefono

Il pannello occupa l’88% della larghezza e i quadratini si misurano su di lui, quindi la scritta resta intera; il tocco fa scorrere l’insegna come il clic. L’accensione al passaggio c’è solo col mouse: sul telefono le lettere si accendono quando le tocchi.

Con il movimento ridotto

Le lettere si accendono e si spengono in dissolvenza, senza onda né bagliore; premendo, la scritta cambia senza scorrere e la riga piccola cambia in dissolvenza.

Trappole

Lo scorrimento va disegnato a colonne intere (la parte intera del numero), non in modo continuo: scorrendo di frazioni di colonna i quadratini si spostano fra le celle e l’insegna sembra un testo qualunque.
La striscia deve finire con la prima scritta: così l’ultimo passo arriva su Open now e lo scorrimento torna a zero senza un salto visibile.
Le misure si ricalcolano con un ResizeObserver sul pannello e la densità dei pixel al massimo 2, altrimenti dopo una rotazione del telefono i quadratini diventavano sfocati o la scritta usciva dal pannello.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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