Il pulsante a tasto meccanico

Pulsanti, 3D, Fisica, SVGGSAP, CanvasImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

Un grande tasto di tastiera meccanica in 3D, su un piccolo blocco d’alluminio con una fascia d’acrilico fumé: il keycap scolpito prende la luce di una lampada che segue il puntatore e ha la sua ombra di contatto. Premuto scende sulla corsa di un interruttore simulato, col gradino tattile a metà; quando scatta parte dal centro un’onda di luce RGB che corre nel pozzo, nella fascia e fuori, intorno al blocco. Risponde anche al tasto Invio della tastiera vera, e fa partire un deploy.

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 mechanical key button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the mechanical key: one big keycap on a little aluminium pad, seen from above the desk. Pressed, it travels
         down on a switch with a tactile bump, clicks halfway, and the lights under the smoked acrylic ripple out from
         it. The Enter key of the real keyboard presses it too -->
    <div class="deploy" data-deploy>
      <div class="pad" data-pad>
        <canvas class="pad__desk" aria-hidden="true" data-leds></canvas>
        <svg class="pad__case" aria-hidden="true" data-case></svg>
        <span class="pad__shadow" aria-hidden="true" data-shadow></span>
        <svg class="pad__cap" aria-hidden="true" data-cap></svg>
        <span class="key__legend" aria-hidden="true" data-legend>Deploy</span>
        <span class="key__front" aria-hidden="true" data-front><svg viewBox="0 0 24 24"><path d="M19 5v7.5H6M10 8.5l-4 4 4 4"/></svg>Enter</span>
        <!-- the real button: a transparent area over the keycap -->
        <button class="key" type="button" aria-label="Deploy to production" aria-describedby="deploy-status" data-key data-autoclic></button>
      </div>

      <!-- what the key is doing, and how to press it -->
      <div class="status" id="deploy-status" data-rise>
        <span class="status__text" data-status>Ready to deploy</span>
      </div>
      <p class="hint" data-rise><span data-hint>Press the key, or hit <kbd>Enter</kbd> on your keyboard</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 a tasto meccanico» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un macropad visto di tre quarti dall’alto: un blocco grigio d’alluminio con lo spigolo lucido, una fascia d’acrilico fumé alla base e un solo grande keycap color crema, scolpito (più stretto in cima, con la conca), con scritto Deploy sopra e una piccola freccia con ENTER sul davanti; sotto, la riga Ready to deploy e l’invito Press the key, or hit Enter on your keyboard. Nel pozzo e nella fascia gira piano un arcobaleno tenue, che si spande appena intorno al blocco. Muovendo il mouse la luce della lampada lo segue: i riflessi sul keycap e sullo spigolo si spostano, la camera ruota appena e l’ombra del tasto si sposta dall’altra parte. Premendo, il tasto scende: si ferma un istante sul gradino tattile, poi scatta giù fino in fondo e il blocco sobbalza di un pixel. Nel momento dello scatto il pozzo si accende di bianco e un’onda di colore parte dal centro: illumina il keycap da sotto, corre lungo la fascia e si allarga intorno al blocco come un anello di luce. Sotto, la riga diventa arancio e dice Building, Uploading e Going live con la percentuale, mentre una luce azzurra e viola riempie la fascia girando intorno al blocco e l’invito dice Press again to cancel. Alla fine un’onda verde, la fascia e il pozzo verdi, sul tasto una spunta con Live e la riga verde Live on production; dopo qualche secondo torna Deploy. Premendo durante il deploy l’onda è rossa e la riga rossa dice Deploy cancelled. Col tasto Invio della tastiera il tasto si preme e resta giù finché Invio è giù.

Come funziona

Un modello 3D in SVG

Il blocco e il tasto sono un piccolo modello: rettangoli arrotondati a varie altezze (il fondo del pozzo, il piano del blocco, la base e la cima del keycap), con sei segmenti per angolo. Una camera alzata di 46 gradi e girata di 0,3 radianti proietta i punti con un po’ di prospettiva, e a ogni fotogramma lo script riscrive i tracciati dell’SVG: le pareti fra due anelli di punti, il piano del blocco col buco (fill-rule evenodd), lo spigolo smussato. Le facce girate dall’altra parte, riconosciute dal verso in cui girano sullo schermo, non si disegnano.

Luce e ombre

Ogni faccia prende il colore dal CSS e la luce da una lampada: luce d’ambiente più forte verso l’alto, la diffusa secondo l’angolo con la lampada e un riflesso verso la camera, con un materiale diverso per keycap, alluminio, spigolo lucido e pozzo. La lampada segue il puntatore sopra il blocco e la camera la segue appena; il piano del keycap è una conca, sfumata in nove punti. L’ombra di contatto è un rettangolo sfocato portato sul piano del blocco con una matrice, più netta e vicina quanto più il tasto scende.

L’interruttore simulato

La corsa è un numero da 0 a 1 mosso da una forza: il dito spinge con una forza che cresce in fretta, la molla risponde da un precarico, e un gradino (una gaussiana, ripida dopo il picco, di forza BUMP) si oppone a un terzo della corsa. Così il tasto esita sul gradino e poi scatta; a metà della corsa l’interruttore si attiva e fa partire l’azione, in fondo c’è un arresto duro con un rimbalzino. La fisica fa sei passi per fotogramma, col passo limitato a 1/30 di secondo, e una pressione corta arriva comunque fino allo scatto.

L’onda RGB

La luce di ogni punto è una funzione della sua distanza dal centro, misurata in larghezze del tasto: ogni scatto aggiunge un anello che si allontana a WAVE larghezze al secondo e lascia dietro un po’ di luce. La stessa funzione colora il pozzo (un gradiente radiale e un bagliore attorno al keycap), la fascia d’acrilico, tagliata in spicchi di 14 pixel perché il colore ci corra lungo, e la scrivania, un canvas a metà risoluzione sotto il blocco con macchie di luce sommate e l’anello che si allarga.

Le scritte sul keycap

Deploy ed ENTER sono testo HTML vero, posato sulle facce con una matrice: lo script proietta un pixel del modello lungo la faccia e uno lungo la sua pendenza, e quei due vettori sono le colonne della matrix() del CSS. Le scritte restano nitide, seguono la prospettiva e scendono col tasto; il pulsante vero è un’area trasparente sopra il keycap.

Tastiera, dito e deploy

Invio preme il tasto da qualunque punto della pagina (Spazio quando il tasto ha il fuoco), e resta giù finché il tasto vero è giù; un clic senza pressione (lettore di schermo, anteprima) lo fa scendere e risalire da solo. Il deploy finto è una timeline a strappi di DEPLOY secondi che riempie la fascia girando; una pressione durante il deploy lo annulla con un’onda rossa, l’anteprima della libreria non annulla mai.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TRAVEL`	script.js	`24`	Di quanti pixel scende il tasto (4 millimetri su una tastiera vera).
`STIFF`	script.js	`2000`	Quanto spinge indietro la molla dell’interruttore.
`BUMP`	script.js	`0.9`	Quanto è forte il gradino tattile a metà corsa (0 = un interruttore lineare, liscio).
`WAVE`	script.js	`2.4`	Quanto corre veloce l’onda di luce, in larghezze del tasto al secondo.
`HUE`	script.js	`18`	Il colore da cui parte l’onda, come tinta: 0 rosso, 120 verde, 240 blu.
`DEPLOY`	script.js	`3.4`	I secondi del deploy finto.
`DONE`	script.js	`2.8`	I secondi in cui il tasto dice Live prima di tornare pronto.
`LIGHT`	script.js	`1`	Quanto la lampada segue il puntatore (0 = resta dov’è).

Provali nel Playground

Quando usarla

Per l’azione che conta in uno strumento per sviluppatori o creativi: Deploy, Run, Publish, Ship, Record. Sta bene da solo, su un fondo scuro, in un pannello di controllo o nella pagina di lancio di un prodotto per chi ama le tastiere; il tasto Invio che lo preme lo rende naturale dove l’azione si lancia dalla tastiera.

Sul telefono

Il disegno si scala sulla larghezza dello schermo (a 390 pixel il blocco è largo circa 350) e niente sfora. Il dito preme il tasto e lo tiene giù finché resta appoggiato, la lampada va dove tocca; la riga sotto non parla del tasto Invio.

Con il movimento ridotto

Il tasto non scorre: è giù finché è premuto e su appena lo si lascia, senza molla né sobbalzo. La lampada e la camera stanno ferme. Al posto dell’onda che corre, il pozzo e la fascia si accendono insieme e si spengono in dissolvenza; il deploy riempie la fascia lo stesso, e le scritte cambiano senza sfocatura.

Trappole

Le facce di una parete curva sono spicchi sottili: affiancate, fra l’una e l’altra si vedeva una riga del fondo. Ogni spicchio ha anche un contorno di 0,7 pixel del suo stesso colore.
La parte del keycap che scende sotto il piano del blocco va disegnata solo dentro il buco (un clipPath col bordo del pozzo), o il tasto sembra passare davanti al blocco invece di affondarci.
Con lo schermo che ha la y verso il basso, il verso delle facce visibili è l’opposto di quello dei libri: con l’area col segno sbagliato si vedevano solo le pareti di dietro.
Visto dritto davanti, il modello sembrava un disegno piatto: girando la camera di 0,3 radianti si vedono il fianco e lo spessore, e il 3D si legge subito.
La fascia d’acrilico, coi lati dritti fatti di un solo spicchio, si accendeva tutta di un colore: va tagliata ogni 14 pixel perché l’onda e il progresso ci scorrano lungo.
Un anello di luce sulla scrivania, lasciato correre, usciva dal canvas tagliato di netto: si spegne prima di arrivare al bordo.
Un tocco brevissimo lasciava il tasto prima dello scatto e il deploy non partiva: la spinta continua finché l’interruttore non si attiva, come un tasto vero premuto in fretta.
Invio sulla pagina premeva il tasto anche mentre il fuoco era su un altro pulsante: lo preme solo quando il fuoco non è su nient’altro, o è sul tasto.

Librerie

GSAP 3.15.0, Space Grotesk (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

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