La tastiera di pianoforte

Hover, SVGGSAP, Solo CSSMediaPeso compresso: Demo 9,8 KBGSAP 28 KBGratisScarica lo zip

Una lunga tastiera di pianoforte disegnata in 3D col CSS: passando col puntatore i tasti si abbassano con la prospettiva giusta e tornano su con un rimbalzo, e da ognuno vola su una nota disegnata, colorata per altezza. Un glissando fa un’onda, un clic un accordo.

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 piano keyboard</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="sala">
    <header class="insegna">
      <p class="insegna__sopra" data-entra>Piano, strings and voice for every age</p>
      <h1 class="insegna__titolo" data-titolo>Larkspur School of Music</h1>
      <p class="insegna__sotto" data-entra>Open studio every Saturday morning</p>
    </header>

    <!-- la tastiera: tasti bianchi e neri in 3D con il CSS, costruiti dallo script -->
    <div class="pianoforte" data-pianoforte aria-hidden="true">
      <div class="piano" data-piano>
        <div class="piano__parete"><i class="piano__filetto"></i><i class="piano__feltro"></i></div>
        <div class="piano__letto"></div>
        <div class="piano__tasti" data-tasti></div>
        <div class="piano__listello"></div>
      </div>
    </div>

    <p class="invito" data-entra data-invito>Glide across the keys. Click for a chord.</p>
  </main>

  <!-- le note che volano: disegni nostri, usati con use -->
  <div class="cielo" data-cielo aria-hidden="true"></div>
  <svg class="disegni" aria-hidden="true" focusable="false">
    <symbol id="semiminima" viewBox="0 0 40 64">
      <ellipse cx="14" cy="52" rx="9" ry="6.4" transform="rotate(-22 14 52)" />
      <rect x="20.6" y="7" width="3.4" height="45" rx="1.2" />
    </symbol>
    <symbol id="minima" viewBox="0 0 40 64">
      <ellipse cx="14" cy="52" rx="8.2" ry="5.6" transform="rotate(-22 14 52)" fill="none" stroke="currentColor" stroke-width="3.2" />
      <rect x="20.6" y="7" width="3.4" height="43" rx="1.2" />
    </symbol>
    <symbol id="croma" viewBox="0 0 40 64">
      <ellipse cx="14" cy="52" rx="9" ry="6.4" transform="rotate(-22 14 52)" />
      <rect x="20.6" y="7" width="3.4" height="45" rx="1.2" />
      <path d="M21 7 C 23 18 37 22 33 40 C 32 31 28 27 21 25 Z" />
    </symbol>
    <symbol id="semicroma" viewBox="0 0 40 64">
      <ellipse cx="14" cy="52" rx="9" ry="6.4" transform="rotate(-22 14 52)" />
      <rect x="20.6" y="5" width="3.4" height="47" rx="1.2" />
      <path d="M21 5 C 23 13 35 16 33 30 C 31 23 27 21 21 19 Z" />
      <path d="M21 16 C 23 24 37 28 33 44 C 32 35 28 32 21 30 Z" />
    </symbol>
    <symbol id="crome" viewBox="0 0 58 64">
      <ellipse cx="12" cy="52" rx="9" ry="6.4" transform="rotate(-22 12 52)" />
      <ellipse cx="42" cy="46" rx="9" ry="6.4" transform="rotate(-22 42 46)" />
      <rect x="18.6" y="13" width="3.4" height="39" rx="1.2" />
      <rect x="48.6" y="7" width="3.4" height="39" rx="1.2" />
      <path d="M18.6 12 L 52 5 L 52 13 L 18.6 20 Z" />
    </symbol>
    <symbol id="chiave-sol" viewBox="0 0 40 84">
      <path d="M21 52 C 15 52 14 44 20 42 C 28 40 32 48 29 54 C 25 62 9 61 7 51 C 5 40 16 33 22 27 C 28 21 31 12 27 6 C 23 1 17 7 18 16 L 23 72 C 23 80 12 80 12 74" fill="none" stroke="currentColor" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round" />
      <circle cx="15" cy="73" r="4.2" />
    </symbol>
    <symbol id="chiave-fa" viewBox="0 0 52 64">
      <path d="M11 22 C 11 12 19 8 25 8 C 35 8 39 16 39 24 C 39 40 25 52 8 58" fill="none" stroke="currentColor" stroke-width="4.2" stroke-linecap="round" />
      <circle cx="12" cy="22" r="5.4" />
      <circle cx="46" cy="16" r="3" />
      <circle cx="46" cy="30" r="3" />
    </symbol>
  </svg>

  <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.

20 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 «La tastiera di pianoforte» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo color carta c’è l’insegna di una scuola di musica inventata, Larkspur School of Music, e sotto una tastiera lunga quanto lo schermo, vista dall’alto e un po’ di sbieco: tasti bianchi color avorio con lo spessore sul davanti, tasti neri rialzati con i fianchi e l’ombra sui bianchi, il feltro rosso sulle code e dietro la parete laccata. All’apertura le lettere del titolo saltano su una per una e la tastiera suona da sola una scala che sale, chiusa da un accordo. Passando col puntatore, il tasto sotto la mano si abbassa ruotando intorno alla coda, si scurisce e prende il colore della sua nota; quando la mano se ne va torna su con un piccolo rimbalzo. Da ogni tasto premuto vola su una nota disegnata (semiminima, minima, croma, due crome legate, semicroma) che si gonfia, ondeggia, gira un poco e svanisce, blu sui gravi, rossa al centro, color zafferano sugli acuti; intanto la lettera del titolo che sta sopra quel tasto salta, colorata, e si porta dietro le vicine. Più la mano corre, più i tasti davanti a lei si piegano in anticipo: un glissando veloce diventa un’onda. Un clic, o un tuffo deciso sui tasti dall’alto, suona un accordo di tre tasti con note più grandi e le chiavi di violino e di basso, e tutto il titolo fa la ola. Se nessuno suona per qualche secondo, la tastiera fa da sola una frase breve.

Come funziona

Una tastiera in 3D col CSS

Il contenitore ha la prospettiva; dentro, il piano è inclinato con rotateX intorno al bordo davanti e tiene transform-style: preserve-3d. Lo script costruisce i tasti: per ogni ottava sette bianchi affiancati e cinque neri, centrati sul confine fra due bianchi con un piccolo spostamento (il do diesis un po’ a sinistra, il re diesis un po’ a destra), larghi 0,58 di un bianco e lunghi il 64%. Un tasto vero è lungo circa sei volte e mezzo la sua larghezza: la lunghezza è quella, se lo schermo la lascia.

Lo spessore, i fianchi, l’ombra

Ogni tasto ha la faccia davanti, un figlio ruotato di −90° in basso, che scende nel piano: è lo spessore. I neri stanno su con translateZ, hanno anche i due fianchi (rotateY ±90°) e un’ombra appoggiata sui bianchi, che si schiarisce quando il nero scende. Il feltro rosso è una striscia sopra le code, la parete laccata un pannello in piedi, il listello davanti un pannello che scende. Il fondo fra i tasti sta più giù della punta di un tasto premuto, così non lo copre mai.

Il tasto che scende

Un tasto è un oggetto con un valore p, da 0 (su) a 1 (giù), che GSAP porta avanti: rotateX(−p × DEPTH) intorno alla coda, e una velatura che si accende con p, scura in alto e colorata in punta. Premere dura sette centesimi; lasciare è un elastic.out più o meno molle secondo BOUNCE, e il rimbalzo in su (p sotto lo zero) vale solo sei decimi.

Chi tocca cosa

A ogni movimento si chiede a elementFromPoint quale tasto sta sotto il puntatore, e anche lungo il segmento dal punto di prima, a passi di un terzo di tasto, così una mano veloce non salta nessun tasto. La velocità in tasti al secondo decide l’onda: da tre in su i quattro bianchi davanti, nella direzione della mano, si piegano un poco, ciascuno meno del precedente e un attimo dopo. Un clic, un tocco o un tuffo dall’alto sopra i 320 pixel al secondo suona la triade che parte dal tasto.

Le note e il titolo

Le note sono symbol in un SVG nascosto, disegnati con ellissi, rettangoli e curve, e usati con use. Ognuna parte dal tasto, scelta a caso, colorata con gsap.utils.interpolate fra i tre colori secondo l’altezza; una timeline la gonfia con back.out, la porta su con power2.out e la fa ondeggiare e girare con keyframes in sine.inOut, poi la spegne. Le lettere del titolo sono span: il tasto sceglie quella che gli sta sopra in proporzione, che salta e si colora; l’accordo le fa saltare tutte, una dopo l’altra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`KEYS`	script.js	`3`	Quante ottave ha la tastiera (al telefono al massimo due).
`NOTES`	script.js	`1`	Quante note volano da ogni tasto premuto: 0 nessuna, 0.5 una ogni due, 2 un piccolo stormo.
`BOUNCE`	script.js	`1`	Quanto rimbalza un tasto quando torna su, e quanto le lettere del titolo (0 = nessun rimbalzo).
`FLOAT`	script.js	`1`	Quanto in alto e quanto a lungo volano le note.
`WAVE`	script.js	`1`	Quanto è grande l’onda di un glissando veloce (0 = niente onda).
`DEPTH`	script.js	`6`	Quanto si abbassa un tasto, in gradi.
`--nota-grave, --nota-media, --nota-acuta`	style.css	`#2E44B4, #D6432E, #DE8C0F`	I colori delle note, dai gravi agli acuti: ogni tasto prende quello che gli spetta per altezza.
`--feltro, --avorio, --ebano, --cassa`	style.css	`#A51F2B, #F8F3E8, #1A1612, #15110E`	Il feltro rosso, i tasti bianchi, i tasti neri e la lacca della cassa.

Provali nel Playground

Quando usarla

Per l’apertura del sito di una scuola di musica, di un insegnante di pianoforte, di un negozio di strumenti, di un festival o di un compositore: una prima schermata che si suona con la mano. Va bene anche come gioco in una pagina di contatti o in fondo a una pagina.

Sul telefono

Le stesse animazioni con al massimo due ottave, i tasti più stretti e le note più piccole. Si suona facendo scorrere il dito sui tasti (sulla tastiera la pagina non scorre) e un tocco senza trascinare suona un accordo.

Con il movimento ridotto

Niente si muove: i tasti non scendono ma si velano e si colorano, le note compaiono in dissolvenza un poco sopra il tasto e svaniscono senza volare, le lettere del titolo cambiano colore senza saltare. L’entrata è una dissolvenza.

Trappole

Un tasto premuto ruota intorno alla coda e la sua punta scende sotto il piano: se il fondo fra i tasti sta appena sotto la superficie, la punta ci passa dietro e il tasto sembra tagliato. Il fondo sta più giù di quanto scende la punta con il DEPTH scelto.
Un filter: blur dentro un contenitore con preserve-3d appiattisce l’elemento e confonde l’ordine dei piani: l’ombra dei tasti neri è un colore con un box-shadow, senza filtri.
Il piano è inclinato con un transform nel CSS: animarlo con GSAP (y, scale) cancellerebbe il rotateX. L’entrata muove il contenitore, che non ha transform suoi.
Con un puntatore veloce due eventi possono stare a tre tasti di distanza: guardando solo il punto attuale i tasti in mezzo restano muti. Si interroga elementFromPoint lungo il segmento.
Lasciare un tasto mentre sta ancora scendendo uccideva la discesa a metà e il tasto si muoveva appena: il ritorno aspetta che la discesa finisca.
Sul telefono il dito fa scorrere la pagina invece di suonare: sulla tastiera c’è touch-action: none, e il tasto si cerca con elementFromPoint, perché col dito pointerenter non arriva agli altri tasti.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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