Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Le corde da pizzicare
Un piè di pagina con una fila di corde disegnate su un canvas: attraversandole col puntatore vibrano, ognuna col suo passo, si piegano verso la mano e dietro resta una scia che svanisce.
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>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
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
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 «Le corde da pizzicare» da Animorio e adattala al mio sitoCosa fa
Dietro ai testi di un piè di pagina, una fila di corde verticali sottili, color crema. Attraversandone una col puntatore la si pizzica: vibra più forte quanto più veloce passi, nel punto in cui l’hai presa, e si spegne piano; ogni corda ha la sua frequenza, così una passata veloce le fa tremare tutte in modo diverso. Passandoci vicino le corde si piegano un poco verso il puntatore, la striscia fra le due corde più vicine si accende dal basso e dietro resta una scia color ambra che svanisce in un secondo e mezzo. Se nessuno le tocca, ogni tanto una mano invisibile le sfiora da sola. Col dito si trascina di lato, e un tocco pizzica le tre corde vicine.
Come funziona
Chi attraversa, pizzica
A ogni movimento si guarda il segmento fra la posizione di prima e quella nuova: se una corda sta in mezzo è stata attraversata. Il punto d’attraversamento dà l’altezza della presa, la velocità in x, misurata sui timeStamp degli eventi, dà la forza: tra 5 e 28 pixel.
Una corda che vibra
Lo spostamento è ampiezza × e^(−2,2 t) × cos(2π f t), con f fra 4 e 12 Hz, diversa per ogni corda. La forma è un arco che vale 1 nel punto di presa e 0 alle due estremità, due quarti di seno; la corda si disegna in 28 tratti.
Il richiamo della mano
Vicino al puntatore ogni corda si piega di (distanza) × 0,12 × una campana larga 140 pixel, con lo stesso arco centrato all’altezza del puntatore. Più si piega o vibra, più la corda si scalda verso l’ambra e si ispessisce.
Disegnare solo se serve
Il canvas si ridisegna solo se il piè di pagina è visibile e qualcosa si muove: una corda che vibra, la scia, il puntatore. La scia si disegna in due passate sommate con «lighter», una larga e tenue e una sottile e piena, e ogni gesto nuovo ne comincia una nuova.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DISTANZA | script.js | 64 | La distanza fra una corda e l’altra, in px (40 al telefono). |
FORZA, MASSIMA | script.js | 0.035, 28 | Quanto la velocità diventa ampiezza, e l’ampiezza più grande. |
SMORZA | script.js | 2.2 | Quanto in fretta una corda smette di vibrare. |
PIEGA, RAGGIO | script.js | 0.12, 140 | Quanto le corde si piegano verso il puntatore, e fin dove. |
SCIA | script.js | 1.4 | Quanti secondi resta la scia. |
Quando usarla
Per il piè di pagina di un sito che vuole chiudere con un gioco: uno studio creativo, un musicista, un festival. Chi arriva in fondo trova qualcosa da toccare.
Sul telefono
Le corde sono più fitte; si pizzicano trascinando il dito di lato o con un tocco, mentre in verticale la pagina scorre come sempre. La mano invisibile passa anche lì.
Con il movimento ridotto
Le corde stanno ferme: niente vibrazioni, niente scia, niente mano invisibile; resta solo la striscia che si accende sotto il puntatore.
Trappole
- Guardare solo la posizione attuale del puntatore perde le corde attraversate fra due eventi: si controlla il segmento fra la posizione di prima e quella nuova.
- La velocità calcolata sull’orologio della pagina esplode quando due eventi arrivano nello stesso fotogramma: si usa il timeStamp dell’evento, con un minimo di 4 millesimi.
- Se la scia collega l’ultimo punto di un gesto al primo del successivo, compare una riga dritta attraverso lo schermo: ogni gesto nuovo segna il suo primo punto.
- Un canvas che si ridisegna sempre consuma batteria anche fuori dallo schermo: un IntersectionObserver lo ferma, e si disegna solo se qualcosa si muove.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
