Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La pallina che rimbalza sulle sillabe
Un titolo da karaoke nello stile minimal: una frase in carattere variabile, con le sillabe ancora da cantare chiare e sottili, e una pallina vermiglia che salta di sillaba in sillaba su parabole vere. Ogni sillaba toccata cede sotto la pallina, prende peso e diventa nera. Alla fine la pallina scende sulla riga e rimbalza sempre più bassa; la pallina si può prendere e lanciare, e canta quello su cui cade.
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>Bouncing ball</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Sing a little melody. A small ball bounces from syllable to syllable, and every syllable it touches is sung.">
<header class="top" aria-hidden="true">
<span class="top__brand">Little Choir</span>
<span class="top__note">Karaoke on Fridays</span>
</header>
<!-- the phrase, one span per syllable, built by the script; the ball bounces on top of it -->
<div class="song" data-song aria-hidden="true">
<div class="lines" data-lines></div>
<svg class="rule" data-rule-svg aria-hidden="true"><path data-rule d="" /></svg>
<span class="shadow" data-shadow></span>
<span class="ball" data-ball><span class="ball__body" data-ball-body></span></span>
<span class="hit" data-hit></span>
</div>
<p class="sr">Sing a little melody</p>
<p class="hint" aria-hidden="true">Grab the ball and throw it</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.
18 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 «La pallina che rimbalza sulle sillabe» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo compare una frase su due righe, Sing a little / melody, divisa in sillabe: le sillabe ancora da cantare sono chiare, sottili e strette. Sotto la frase c’è una riga sottilissima. Una pallina vermiglia, con un piccolo riflesso, cade dall’alto sulla prima sillaba e poi salta da una sillaba all’altra su parabole vere, come la pallina delle canzoni da cantare insieme: si posa in cima alle lettere, non sopra la scatola della riga, quindi atterra più in alto su una S o una l e più in basso su una a o una o. A ogni atterraggio la pallina si schiaccia e torna tonda con una piccola oscillazione, e la sillaba toccata cede di qualche pixel sotto di lei, si allarga, prende peso e diventa nera, poi risale con una molla; la sillaba dopo sente il colpo e si abbassa appena. Dopo l’ultima sillaba la pallina scende sulla riga, che cede un poco nel punto dove cade, e rimbalza sempre più bassa finché si ferma, con la sua ombra che si stringe e schiarisce quando sale. Poi la frase torna chiara dall’ultima sillaba alla prima, e la pallina salta di nuovo all’inizio. La pallina si può prendere col mouse o col dito: si ingrandisce un poco in mano, e lanciata vola con la gravità vera, rimbalza sulle lettere, sulla riga e sui bordi, canta ogni sillaba su cui cade; quando si ferma riparte da sola verso la prima sillaba ancora da cantare.
Come funziona
Le parabole vere
Ogni salto dura un BEAT e passa sopra la sillaba più alta di HOP volte la misura del carattere. Dalla posizione di partenza, da quella di arrivo e dall’altezza del vertice si ricava la gravità del salto: g = (√(2·(y0 − vertice)) + √(2·(y1 − vertice)))² / BEAT², e la velocità verso l’alto alla partenza. In orizzontale la pallina va a velocità costante, in verticale y = y0 − v·t + ½·g·t²: è una parabola vera, che frena salendo e accelera scendendo, e arriva sulla sillaba esattamente alla fine del battito.
La cima delle lettere
Il punto dove la pallina si posa è la cima vera di ogni sillaba: una tela nascosta misura il testo col carattere al suo peso cantato (measureText, actualBoundingBoxAscent) e la linea di base si ricava dall’altezza della riga e dall’ascendente del carattere. Così su Sing la pallina sta più in alto che su a, e su melody scende e risale con le lettere.
La sillaba che prende peso
Ogni sillaba è uno span dentro un altro: quello fuori lo muove GSAP (cede di 0,07 em e si schiaccia in 7 centesimi, poi torna con elastic.out), quello dentro porta il peso e la larghezza del Bricolage Grotesque variabile, da IDLE a SUNG e dal 92% al 100%, con back.out. La larghezza di ogni sillaba si misura già cantata e lo span esterno la tiene fissa, così il cambio di peso non sposta la frase.
La fisica del lancio
Presa in mano, la pallina segue il puntatore con un piccolo ritardo; lasciata, parte con la velocità degli ultimi sei movimenti. Da lì è libera: la gravità è quella dei salti, le lettere sono mensole su cui si può posare solo scendendo, la riga è il pavimento, i bordi della pagina le pareti; a ogni urto tiene BOUNCE della velocità. Quando sta ferma quasi mezzo secondo riparte con un salto verso la prima sillaba ancora da cantare.
Lo schiacciamento e la riga
Lo schiacciamento della pallina e la riga che cede sono due molle calcolate a ogni fotogramma sul ticker di GSAP (accelerazione = −k·x − c·v): l’urto dà la spinta, proporzionata alla velocità, e la molla torna a zero con una piccola oscillazione. La riga è un path SVG che sotto la pallina diventa una campana di Gauss profonda qualche pixel.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHRASE | script.js | 'Sing a lit-tle / mel-o-dy' | La frase: la barra va a capo, i trattini dividono le sillabe di una parola. |
BEAT | script.js | 0.46 | I secondi di ogni salto da una sillaba alla seguente. |
HOP | script.js | 0.62 | Quanto in alto salta la pallina sopra le sillabe, in frazioni della misura del carattere. |
BOUNCE | script.js | 0.58 | Quanta velocità tiene la pallina a ogni rimbalzo (0,2 si ferma subito, 0,85 rimbalza a lungo). |
SUNG | script.js | 720 | Il peso di una sillaba cantata (da 200 a 800). |
IDLE | script.js | 300 | Il peso di una sillaba ancora da cantare (da 200 a 800). |
SQUASH | script.js | 0.3 | Quanto si schiaccia la pallina quando atterra. |
REST | script.js | 1.2 | I secondi di riposo sulla riga prima che la frase ricominci. |
Quando usarla
Per un sito che vive di voce e di ritmo: una scuola di canto, un coro, una serata di karaoke, un’app per imparare i testi o la dizione, un festival di musica. Anche come titolo di una pagina per bambini o di una lezione sulle sillabe.
Sul telefono
La stessa animazione con le misure adattate: la frase va su due righe e si misura sulla larghezza e sull’altezza dello schermo, la pallina è più piccola. La pallina si prende e si lancia col dito; sul resto della frase la pagina scorre normalmente.
Con il movimento ridotto
Niente salta e niente si schiaccia: la pallina compare in dissolvenza sopra una sillaba alla volta, la sillaba prende peso e diventa nera in dissolvenza, e alla fine la frase torna chiara.
Trappole
- Con la gravità fissa e la durata fissa il vertice cambiava a ogni salto e da una riga all’altra la pallina saliva troppo o troppo poco. Ora il vertice è fisso sopra la sillaba più alta e la gravità si ricava per ogni salto: la parabola è sempre vera e arriva sempre a tempo.
- Se la pallina si posava sulla scatola della sillaba sembrava sospesa sopra le lettere basse. La cima si misura col testo vero su una tela, al peso cantato, che è quello che si vede quando la pallina arriva.
- Il transform scritto in linea dallo script sulla pallina cancella anche la proprietà scale del CSS: l’ingrandimento al passaggio è calcolato nello stesso transform, insieme allo schiacciamento.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
