The colour columns
Hover, SVG
NewFree
Back to the library
The staff under the pointer
In the minimal style, on black: a staff of five thin lines and one note for every beat, and under it the letters of the notes spelling CABBAGE. The pointer moves the note of the beat it passes over, one step at a time: the note springs to its place with a little squash, the line it lands on trembles like a string, ledger lines appear above and below, the stem flips over the middle line and the letter rolls to the new name.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
19 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The staff under the pointer” from Animorio and fit it into my siteWhat it does
On a nearly black ground there is a staff: five thin ivory lines that cross the page, closed by a bar line at each end, and at the start, in place of the clef, the letters of the lines and spaces in small grey italics (E F G A B C D E F). On it there are seven quarter notes, tilted oval heads with their stems, and under each one, large, its letter in Newsreader: together they say C A B B A G E. When the page opens the lines draw themselves from the left one after the other, then the notes drop onto the staff one at a time and each one, landing on a line, makes it tremble like a plucked string. When the pointer goes over the staff, the note of the beat under it turns orange with its letter, which turns italic and takes weight, and it jumps to the pointer’s height, one step at a time between lines and spaces: it springs, goes a hair past the mark, squashes a little and settles; if it lands on a line, the line trembles just around it and calms down. Going above the staff or below it, ledger lines appear, and when the note crosses the middle line the stem flips to the other side, passing through nothing. The letter underneath rolls down to the new name. The tune stays as you leave it.
How it works
The steps of the staff
Every note is a step: zero is the E on the bottom line, each step is half a space higher. The name comes from counting the steps on the seven-letter scale starting from C, with the octave; TUNE takes names like C5 or A4, from A3 to C6. Everything is drawn in an SVG that measures the space between the lines from the page.
Lines that tremble
The five lines are not straight lines but rows of points, one every ten pixels. When a note lands on a line, a pluck is added to the line: a shift that is a fast sine, dies away exponentially and only counts round the note (a bell three spaces wide). The lines are redrawn only while a pluck is alive, and TREMBLE says how many pixels.
The note’s spring
Every note has a spring on its height (SPRING, stiffness and damping) and a stiffer one for the squash of the head, in fixed steps of 1/240 of a second in GSAP’s ticker. When it gets within half a pixel it gets the squash’s knock, and if it sits on a line it sets off the pluck. The head is an ellipse tilted by 22 degrees whose radii trade a little with the squash.
The stem and the ledger lines
The stem goes up on the right below the middle line and down on the left from B upwards, the way music is written. Its direction is a number from plus one to minus one that GSAP carries with back.out: passing through zero the stem shrinks to nothing and grows again on the other side. The ledger lines are counted from the note’s height while it moves, so they appear and disappear during the jump.
The pointer picks the beat
The beat is the one under the pointer, and the step is rounded from its height; outside the band of the staff nothing changes. The colour of the note under the pointer turns orange through an interpolation, the letter takes weight and italics. The arrow keys pick the beat and move the note.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TUNE | script.js | ['C5', 'A4', 'B4', 'B4', 'A4', 'G4', 'E4'] | The notes when the page opens, from A3 to C6. |
SPRING | script.js | [260, 16] | The notes’ spring: how stiff, and how much it is held back (less damping, more wobble). |
TREMBLE | script.js | 2.2 | How far a line trembles when a note lands on it, in pixels. |
STEM | script.js | 3.4 | How long the stems are, in spaces of the staff. |
NAMES | script.js | true | The letters of the notes under the staff. |
--accent | style.css | #ff7a1a | The colour of the note under the pointer. |
When to use it
For a music or piano school, for a choir, for the page of a concert or a music season, for an app that teaches how to read notes. Changing TUNE, the opening tune spells another word with the letters from A to G.
On phones
The same springs and the same trembling lines, with adapted sizes: the staff takes the width of the screen and at the start only the letters of the lines remain. Drag a finger over the staff to move the notes, beat after beat; lift it and the tune stays.
With reduced motion
No springs and no trembling: the note moves straight to its new step, the stem flips without passing through nothing and the lines stay still. The note under the pointer turns orange with a gentle change and the page appears already written.
Pitfalls
- The ledger lines of a note in a space below the staff counted one too many: the step is rounded and, if it is a space, the lowest ledger is the one above it.
- On a phone the space between the lines came to twelve pixels and the notes were dots: there the beats are narrower and the space grows by a third.
- The nine letters standing in for the clef touched on a narrow screen: only those of the lines remain.
- Listening to the pointer only at the end of the opening missed the preview pointer’s first pass: it listens as soon as the last note has dropped.
Libraries
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.5 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
