Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Le lettere da curling che si fermano nella casa
Un pezzo di fisica nello stile minimal: su un ghiaccio bianco caldo, una fila di pietre da curling di granito con una lettera ciascuna. Una alla volta salgono alla linea di lancio, prendono la mira e scivolano su per il ghiaccio, frenate dall’attrito e piegate dall’effetto, fino a fermarsi nella casa, i cerchi in fondo, dove compongono la parola. Le pietre si urtano davvero; quella alla linea si può trascinare e lanciare.
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>Curling letters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Curling stones with a letter each slide up the ice and stop in the house, where they spell a word.">
<header class="top" aria-hidden="true">
<span class="top__brand">Northrink</span>
<span class="top__note">Curling club</span>
</header>
<!-- the sheet of ice: lane lines, hog line, the house with its rings; drawn by the script -->
<svg class="sheet" data-sheet aria-hidden="true"></svg>
<!-- the stones, one per letter, built by the script -->
<div class="stones" data-stones aria-hidden="true"></div>
<p class="sr" data-sr>Glide</p>
<footer class="bottom" aria-hidden="true">
<span class="hint" data-hint>Drag the stone and let go</span>
<span class="status"><span class="status__n" data-count>0</span> <span data-status-text>of 5 in the house</span></span>
</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 lettere da curling che si fermano nella casa» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo è disegnata a linee sottilissime una pista di curling vista dall’alto: i due bordi, la linea di fondo, la linea dei tiri validi e in alto la casa, due cerchi grigi e il bottone blu, con le linee che si incrociano al centro. In basso aspetta una fila di pietre di granito, ognuna con una lettera della parola GLIDE. La prima sale alla linea di lancio con un piccolo sollevamento, si sposta di lato per prendere la mira e parte: scivola su per il ghiaccio rallentando per l’attrito, gira su sé stessa e, mentre rallenta, l’effetto la piega in una curva leggera, finché si ferma nella casa. Fermandosi torna dritta con una molla e la sua lettera prende peso. Le altre arrivano una dopo l’altra, ognuna accanto alla precedente, e la parola si compone attraverso il bottone; quando è completa il bottone si accende di un blu leggero, le pietre fanno un piccolo saltello in fila e il contatore in basso dice la parola. Poi le pietre spariscono e comincia una nuova mano. La pietra alla linea di lancio si può prendere col mouse o col dito e lanciare: parte con la velocità della mano, e un colpo di lato le dà l’effetto. Le pietre che si toccano si urtano con un piccolo cerchio che si allarga nel punto dell’urto; quella che esce dalla pista è fuori e sparisce.
Come funziona
La fisica in raggi di pietra
Tutto si calcola in raggi di pietra, con l’origine sul bottone della casa: la distanza dalla linea di lancio cambia con la forma dello schermo, ma le regole restano le stesse. Il passo è fisso, 1/120 di secondo, mosso dal ticker di GSAP: così il ghiaccio si comporta uguale su ogni schermo e nel video.
Attrito ed effetto
A ogni passo la pietra perde FRICTION raggi al secondo di velocità contro il moto, e riceve una spinta di traverso, nel verso del suo giro, che cresce mentre rallenta: CURL · 0,55 / (1 + v / 2,5). Per questo la curva si vede soprattutto alla fine, come sul ghiaccio vero.
La mira trovata simulando
Per i lanci da soli, prima di partire lo script fa scivolare una pietra invisibile con le stesse regole e corregge partenza e velocità finché si ferma sul suo posto nella casa, accanto alla precedente: quattordici prove al massimo, poi la pietra vera parte.
Gli urti
Due pietre che si toccano si separano e si scambiano la velocità lungo la linea che le unisce, con le masse uguali e una perdita data da BOUNCE. Dal punto dell’urto si allarga un cerchio sottile e le due pietre si schiacciano un attimo con una molla.
La pietra ferma
Quando una pietra si ferma, il suo angolo torna al giro intero più vicino con elastic.out, così la lettera si raddrizza con un piccolo assestamento; se si è fermata nella casa si solleva appena e la lettera prende peso. Se un urto la rimette in moto, perde di nuovo il peso e si fermerà di nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'GLIDE' | La parola che le pietre compongono nella casa, da 3 a 6 lettere. |
FRICTION | script.js | 4 | Quanto il ghiaccio frena una pietra, in raggi di pietra al secondo al quadrato (1 scivoloso, 8 appiccicoso). |
CURL | script.js | 1 | Quanto una pietra che gira si piega rallentando (0 dritta, 3 molto). |
BOUNCE | script.js | 0.85 | Quanta velocità tengono due pietre quando si urtano (0,1 sorde, 1 come palle da biliardo). |
SPIN | script.js | 1 | Quanto in fretta le pietre girano su sé stesse mentre scivolano (0 ferme, 4 veloci). |
STONE | script.js | 1 | La misura delle pietre (0,6 piccole, 1,3 grandi). |
REST | script.js | 2.4 | I secondi che la parola finita resta nella casa prima di una nuova mano. |
Quando usarla
Per un circolo di curling o di sport invernali, una pista di pattinaggio, un evento sul ghiaccio, un gioco da tavolo o un’app di bocce e shuffleboard; anche come titolo di una pagina che parla di precisione, mira o di arrivare nel punto giusto.
Sul telefono
La stessa animazione con le misure adattate: le pietre si misurano sulla larghezza e sull’altezza dello schermo, la pista è più corta e i lanci più brevi. La pietra alla linea di lancio si trascina e si lancia col dito; sul palco la pagina non scorre.
Con il movimento ridotto
Niente scivola: la parola è già nella casa, le pietre ferme in fila sul bottone, e compare in dissolvenza.
Trappole
- Con un passo variabile la stessa pietra si fermava in punti diversi a seconda dei fotogrammi: il passo fisso a 1/120 di secondo la rende uguale ovunque, e la mira simulata coincide col lancio vero.
- Una pietra già ferma, colpita da un’altra, restava «ferma» per lo script e non contava più: ora appena si rimette in moto perde lo stato e si riposa quando si ferma di nuovo.
- GSAP non può muovere x e y mentre la mano tiene la pietra: al momento della presa si fermano le animazioni della pietra, e alla fine il lancio parte dalla velocità degli ultimi spostamenti della mano.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,0 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.
