Falling tools
Physics, Hover
NewFree
Back to the library
Strings to pluck
A footer with a row of strings drawn on a canvas: crossing them with the pointer makes them vibrate, each at its own pace, they lean towards the hand and a fading trail stays behind.
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>Strings to pluck</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="intro">
<p class="nota" data-nota>Move the mouse over the strings below: they ring when you cross them and lean towards the pointer when you pass close.</p>
<h1 class="intro__titolo">At the bottom of the page there’s a harp.</h1>
</section>
<!-- il piè di pagina: le corde sono un canvas dietro ai testi -->
<footer class="piede" data-piede>
<canvas class="piede__tela" data-tela aria-hidden="true"></canvas>
<div class="piede__colonne">
<p class="piede__voce"><a href="#">Write to us</a><a href="#">Call us</a></p>
<p class="piede__voce"><a href="#">Instagram</a><a href="#">Find us</a></p>
<p class="piede__voce piede__voce--destra">Open Thursday to Sunday</p>
</div>
<p class="piede__nome">Thanks for visiting.</p>
</footer>
</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.
20 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 “Strings to pluck” from Animorio and fit it into my siteWhat it does
Behind a footer’s text, a row of thin cream vertical strings. Crossing one with the pointer plucks it: it vibrates harder the faster you pass, at the point where you caught it, and fades slowly; each string has its own frequency, so a fast sweep makes them all tremble differently. Passing near them the strings lean a little towards the pointer, the strip between the two nearest strings lights up from below and an amber trail stays behind, fading in a second and a half. If nobody touches them, now and then an invisible hand brushes them by itself. With a finger you drag sideways, and a tap plucks the three nearest strings.
How it works
Crossing means plucking
On every movement the script looks at the segment between the previous and the new position: if a string lies in between, it has been crossed. The crossing point gives the height of the pluck, the x speed, measured on the events’ timeStamps, gives the strength: between 5 and 28 pixels.
A vibrating string
The displacement is amplitude × e^(−2.2 t) × cos(2π f t), with f between 4 and 12 Hz, different for every string. The shape is an arc worth 1 at the pluck point and 0 at both ends, two quarter sines; the string is drawn in 28 segments.
The pull of the hand
Near the pointer every string leans by (distance) × 0.12 × a bell 140 pixels wide, with the same arc centred at the pointer’s height. The more it leans or vibrates, the more the string warms towards amber and thickens.
Drawing only when needed
The canvas is redrawn only if the footer is visible and something moves: a vibrating string, the trail, the pointer. The trail is drawn in two passes added with “lighter”, one wide and faint, one thin and full, and every new gesture starts a new one.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
DISTANZA | script.js | 64 | The distance between strings, in px (40 on a phone). |
FORZA, MASSIMA | script.js | 0.035, 28 | How speed turns into amplitude, and the largest amplitude. |
SMORZA | script.js | 2.2 | How fast a string stops vibrating. |
PIEGA, RAGGIO | script.js | 0.12, 140 | How much the strings lean towards the pointer, and how far away. |
SCIA | script.js | 1.4 | How many seconds the trail lasts. |
When to use it
For the footer of a site that wants to end with a toy: a creative studio, a musician, a festival. Whoever reaches the bottom finds something to touch.
On phones
The strings are closer together; they are plucked by dragging a finger sideways or with a tap, while vertically the page scrolls as usual. The invisible hand passes there too.
With reduced motion
The strings stay still: no vibration, no trail, no invisible hand; only the strip lighting up under the pointer remains.
Pitfalls
- Looking only at the pointer’s current position misses the strings crossed between two events: check the segment between the previous and the new position.
- Speed computed on the page clock explodes when two events arrive in the same frame: use the event’s timeStamp, with a 4-millisecond minimum.
- If the trail connects one gesture’s last point to the next gesture’s first, a straight line appears across the screen: every new gesture marks its first point.
- A canvas that always redraws drains battery even off screen: an IntersectionObserver stops it, and it draws only when something moves.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 21 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
