Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Lo sfondo dei sassolini che si fanno spazio
Uno sfondo animato nello stile minimal, da mettere dietro a un titolo: su una carta bianco caldo, una ventina di ciottoli di fiume piatti e irregolari, visti dall'alto, sparsi con tanto vuoto intorno al titolo. Il puntatore ci passa in mezzo come un piede nella ghiaia: i sassi vicini si fanno da parte, si urtano, girano un poco e tornano piano al loro posto. Un tocco li fa saltellare, prima i vicini e poi i lontani.
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>Kelda</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: smooth pebbles scattered on warm paper, drawn on a canvas behind the page;
the pointer moves through them, they make room and roll back to their places; a tap makes them hop -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio" data-entra>Kelda</p>
<p class="testa__nota" data-entra>Bath house, open at dawn</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Hot pools and cold water</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Room to</span></span>
<span class="riga"><span class="riga__dentro" data-riga>settle.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#" data-pillola>
<span class="pillola__scritta">Book a soak</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
<footer class="piede">
<p class="piede__nota" data-entra>Walk through the stones, tap to stir them</p>
<p class="piede__lettura" aria-hidden="true" data-entra>Stones <span data-stato>at rest</span></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.
23 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 «Lo sfondo dei sassolini che si fanno spazio» da Animorio e adattala al mio sitoCosa fa
Una pagina intera su carta bianco caldo, il fondo di una casa dei bagni inventata, Kelda. Dietro a tutto, su un canvas, una ventina di ciottoli di fiume piatti, visti dall'alto, sparsi a caso ma mai uno sull'altro e con tanto vuoto intorno al titolo: ognuno ha il suo contorno irregolare e storto (a fagiolo, quasi triangolare, mai un ovale), un grigio caldo appena diverso dagli altri, una superficie opaca con una grana fine, un bordo morbido e un'ombra corta e schiacciata che resta sul piano. Uno solo, piatto e storto anche lui, è di terracotta. All'apertura i sassi cadono dall'alto, dal centro verso i bordi, rimbalzano due volte e si posano. Il puntatore apre un vuoto rotondo che segue la mano con un attimo di ritardo: i sassi che ci entrano vengono spinti fuori, urtano i vicini e si passano la spinta, girano secondo come li si sfiora e una molla frenata li riporta al loro posto. Un tocco fa saltellare tutti i sassi, prima i vicini e poi i lontani: salgono, l'ombra si allarga e si schiarisce, ricadono con un rimbalzo piccolo. In basso lo stato dice at rest o moving. Quando nessuno muove il puntatore un passo finto gira fra i sassi e ogni tanto li smuove.
Come funziona
I posti dei sassi
Con un caso a seme fisso si provano fino a 4000 posti: un sasso entra solo se non tocca un vicino (distanza almeno 1,7 volte la somma dei raggi) e se sta fuori da un'ellisse intorno al titolo, misurata sul blocco del titolo. Quanti sassi dipende dall'area della pagina, al massimo SASSI.
Un disegno solo per sasso
Ogni sasso si disegna una volta su due tele piccole: la forma con un gradiente lineare appena accennato, una grana fine e un bordo morbido; e l'ombra, sfocata con shadowBlur spostando la forma fuori dalla tela. A ogni fotogramma si disegnano solo le due immagini, ruotate.
La molla e il vuoto
Ogni sasso ha una molla verso il suo posto, rigidità e freno in MOLLA. Il puntatore è un cerchio su una molla piccola: chi ci entra viene spostato fuori di metà della sovrapposizione e prende una spinta, più un giro secondo la velocità del puntatore lungo il bordo.
Gli urti
Due sassi che si sovrappongono si allontanano di metà ciascuno; se si stanno venendo incontro si scambiano il 60% della spinta lungo la normale, e la parte di lato li fa girare. Due mezzi passi per fotogramma tengono stabili gli urti.
Il saltello e l'ombra
Al tocco ogni sasso ha il suo momento, più tardi quanto più è lontano, e una spinta in alto che cala con la distanza. Il sasso sale contro una gravità, rimbalza a un terzo e si ferma; l'ombra resta sul piano, si allarga, si sposta e si schiarisce mentre sale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SASSI | script.js | 24 | Quanti sassi al massimo. |
MISURA | script.js | 1 | La grandezza dei sassi. |
SPINTA | script.js | 1 | Quanto è largo il vuoto che apre il puntatore. |
MOLLA | script.js | [7, 4.2] | La molla che riporta ogni sasso al suo posto: quanto è rigida e quanto è frenata. |
SALTO | script.js | 1 | Quanto saltano i sassi al tocco. |
OMBRA | script.js | 1 | Quanto sono scure le ombre. |
Quando usarla
Come fondo della prima schermata di una spa, di terme o di una casa dei bagni, di un hotel al mare o in montagna, di un negozio di ceramiche o di oggetti in pietra, di uno studio di architettura del paesaggio; in generale dietro a un titolo corto quando si vuole un fondo chiaro, calmo e tattile che risponde al puntatore. I colori dei sassi e l'accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: i sassi sono più piccoli e meno, misurati sul lato corto della pagina, e restano fuori dal titolo; il dito apre il vuoto mentre tocca e trascina, un tocco li fa saltellare; la pagina continua a scorrere in verticale.
Con il movimento ridotto
I sassi sono già al loro posto e stanno fermi: niente caduta, niente vuoto del puntatore, niente saltelli. Il titolo e le scritte compaiono in dissolvenza.
Trappole
- Disegnare ogni fotogramma forma, gradienti e ombra sfocata di venti sassi rallenta il telefono: ogni sasso si disegna una volta su una tela piccola e poi si incolla ruotato.
- ctx.filter blur non c'è in Safari: l'ombra sfocata si fa con shadowBlur, disegnando la forma fuori dalla tela e spostando l'ombra dentro.
- Con un passo solo per fotogramma, quando un fotogramma dura molto gli urti fanno tremare i sassi: due mezzi passi.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 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.
