Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
Il pentagramma sotto il puntatore
Nello stile minimal, su nero: un pentagramma di cinque righe sottili e una nota per ogni battuta, e sotto le lettere delle note che scrivono CABBAGE. Il puntatore sposta la nota della battuta su cui passa, un gradino alla volta: la nota scatta al suo posto su una molla con un piccolo schiacciamento, la riga su cui atterra trema come una corda, i tagli addizionali compaiono sopra e sotto, il gambo si gira sulla riga di mezzo e la lettera scorre al nome nuovo.
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 staff under the pointer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Sostenuto</span>
<span class="top__note">Piano school, evening classes</span>
</header>
<!-- a staff of five thin lines, like strings, and one note for every beat. The pointer moves the note of the beat
it is over up and down the staff, step by step: the note springs to its place, the line it lands on trembles,
the stem flips over the middle line, and the letters underneath spell the tune -->
<section class="score" aria-label="A tune on the staff" data-score>
<svg class="staff" data-staff role="img" aria-label="A staff with a tune"></svg>
</section>
<p class="hint" data-hint>Move over the staff to write the tune</p>
</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
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 pentagramma sotto il puntatore» da Animorio e adattala al mio sitoCosa fa
Su un fondo quasi nero c’è un pentagramma: cinque righe sottili color avorio che attraversano la pagina, chiuse da una stanghetta a ogni capo, e all’inizio, al posto della chiave, le lettere delle righe e degli spazi in corsivo piccolo e grigio (E F G A B C D E F). Sopra ci sono sette note da un quarto, teste ovali inclinate col loro gambo, e sotto ognuna, grande, la sua lettera in Newsreader: insieme dicono C A B B A G E. Aprendo la pagina le righe si disegnano da sinistra una dopo l’altra, poi le note cadono sul pentagramma una alla volta e ognuna, atterrando su una riga, la fa tremare come una corda pizzicata. Quando il puntatore passa sul pentagramma, la nota della battuta sotto di lui diventa arancione con la sua lettera, che passa in corsivo e prende peso, e salta all’altezza del puntatore, un gradino alla volta fra righe e spazi: scatta su una molla, passa il segno di un niente, si schiaccia appena e si posa; se atterra su una riga, la riga trema solo lì intorno e si calma. Salendo sopra il pentagramma o scendendo sotto compaiono i tagli addizionali, e quando la nota attraversa la riga di mezzo il gambo si gira dall’altra parte passando per niente. La lettera sotto scorre giù al nome nuovo. La melodia resta come la si lascia.
Come funziona
I gradini del pentagramma
Ogni nota è un gradino: lo zero è il Mi della prima riga in basso, ogni gradino è mezzo spazio più su. Il nome si ricava contando i gradini sulla scala di sette lettere a partire da Do, con l’ottava; TUNE accetta nomi come C5 o A4, dal La3 al Do6. Tutto è disegnato in un SVG che misura lo spazio fra le righe dalla pagina.
Righe che tremano
Le cinque righe non sono linee dritte ma file di punti, uno ogni dieci pixel. Quando una nota atterra su una riga, nella riga si aggiunge un pizzico: uno spostamento che è un seno veloce, si spegne con un’esponenziale e vale solo intorno alla nota (una campana larga tre spazi). Le righe si ridisegnano solo finché c’è un pizzico vivo, e TREMBLE dice quanti pixel.
La molla della nota
Ogni nota ha una molla sulla sua altezza (SPRING, rigidità e freno) e una più rigida per lo schiacciamento della testa, a passi fissi di 1/240 di secondo nel ticker di GSAP. Quando arriva entro mezzo pixel riceve il colpo dello schiacciamento, e se sta su una riga fa partire il pizzico. La testa è un’ellisse inclinata di 22 gradi i cui raggi si scambiano un poco con lo schiacciamento.
Il gambo e i tagli
Il gambo va in su a destra sotto la riga di mezzo e in giù a sinistra dal Si in su, come si scrive la musica. La sua direzione è un numero da più uno a meno uno che GSAP porta con back.out: passando per lo zero il gambo si accorcia a niente e rinasce dall’altra parte. I tagli addizionali si contano dall’altezza della nota mentre si muove, così compaiono e spariscono durante il salto.
Il puntatore sceglie la battuta
La battuta è quella sotto il puntatore, e il gradino si arrotonda dalla sua altezza; fuori dalla fascia del pentagramma non cambia niente. Il colore della nota sotto il puntatore passa all’arancione con un’interpolazione, la lettera prende peso e corsivo. Le frecce della tastiera scelgono la battuta e spostano la nota.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TUNE | script.js | ['C5', 'A4', 'B4', 'B4', 'A4', 'G4', 'E4'] | Le note all’apertura della pagina, dal La3 (A3) al Do6 (C6). |
SPRING | script.js | [260, 16] | La molla delle note: quanto è rigida e quanto è frenata (meno freno, più oscilla). |
TREMBLE | script.js | 2.2 | Quanto trema una riga quando ci atterra una nota, in pixel. |
STEM | script.js | 3.4 | Quanto sono lunghi i gambi, in spazi del pentagramma. |
NAMES | script.js | true | Le lettere delle note sotto il pentagramma. |
--accent | style.css | #ff7a1a | Il colore della nota sotto il puntatore. |
Quando usarla
Per una scuola di musica o di pianoforte, per un coro, per la pagina di un concerto o di una stagione musicale, per un’app che insegna a leggere le note. Cambiando TUNE la melodia iniziale scrive un’altra parola con le lettere da A a G.
Sul telefono
Le stesse molle e le stesse righe che tremano, a misure adattate: il pentagramma prende la larghezza dello schermo e all’inizio restano solo le lettere delle righe. Si trascina il dito sul pentagramma per spostare le note, battuta dopo battuta; alzando il dito la melodia resta.
Con il movimento ridotto
Niente molle e niente tremolio: la nota passa subito al gradino nuovo, il gambo si gira senza passare per niente e le righe restano ferme. La nota sotto il puntatore diventa arancione con un passaggio dolce e la pagina compare già scritta.
Trappole
- I tagli addizionali di una nota in uno spazio sotto il pentagramma ne contavano uno di troppo: si arrotonda il gradino e, se è uno spazio, il taglio più basso è quello sopra.
- Sul telefono lo spazio fra le righe veniva di dodici pixel e le note erano puntini: lì le battute sono più strette e lo spazio cresce di un terzo.
- Le nove lettere della chiave, su uno schermo stretto, si toccavano: restano solo quelle delle righe.
- Il puntatore ascoltato solo a fine apertura perdeva il primo passaggio del puntatore dell’anteprima: si ascolta appena l’ultima nota è caduta.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
