Falling tools
Physics, Hover
NewFree
Back to the library
The background of pebbles that make room
An animated background in the minimal style, to put behind a heading: on warm white paper, about twenty flat, uneven river pebbles seen from above, scattered with plenty of empty space around the heading. The pointer walks through them like a foot in gravel: the nearby stones step aside, knock into each other, turn a little and slowly roll back to their places. A tap makes them hop, the near ones first and then the far ones.
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>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
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.
23 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 “The background of pebbles that make room” from Animorio and fit it into my siteWhat it does
A full page on warm white paper, the background of an invented bath house, Kelda. Behind everything, on a canvas, about twenty flat river pebbles seen from above, scattered at random but never on top of each other and with plenty of empty space around the heading: each has its own uneven, lopsided outline (bean-shaped, almost triangular, never an oval), a warm grey just slightly different from the others, a matte surface with a fine grain, a soft edge and a short, flattened shadow that stays on the ground. Only one, flat and lopsided too, is terracotta. On opening the stones drop from above, from the centre towards the edges, bounce twice and settle. The pointer opens a round gap that follows the hand a moment late: the stones that fall into it are pushed out, knock into their neighbours and pass the push on, turn according to how they are brushed, and a damped spring brings them back to their places. A tap makes every stone hop, the near ones first and then the far ones: they rise, the shadow widens and fades, they fall back with a small bounce. At the bottom the status reads at rest or moving. When nobody moves the pointer, a fake step walks among the stones and stirs them now and then.
How it works
The stones' places
With a fixed-seed random, up to 4000 places are tried: a stone goes in only if it touches no neighbour (at least 1.7 times the sum of the radii) and lies outside an ellipse around the heading, measured on the heading block. How many stones depends on the page area, at most SASSI.
One drawing per stone
Each stone is drawn once onto two small canvases: the shape with a faint linear gradient, a fine grain and a soft edge; and the shadow, blurred with shadowBlur by moving the shape off the canvas. Each frame only the two images are drawn, rotated.
The spring and the gap
Each stone has a spring towards its place, stiffness and damping in MOLLA. The pointer is a circle on a small spring: whatever falls into it is moved out by half the overlap and gets a push, plus a spin from the pointer's speed along the edge.
The collisions
Two overlapping stones move apart by half each; if they are moving towards each other they exchange 60% of the push along the normal, and the sideways part makes them turn. Two half steps per frame keep the collisions stable.
The hop and the shadow
On a tap each stone gets its own moment, later the further it is, and an upward push that falls off with distance. The stone rises against gravity, bounces to a third and stops; the shadow stays on the ground, widening, shifting and fading as it rises.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SASSI | script.js | 24 | How many stones at most. |
MISURA | script.js | 1 | The size of the stones. |
SPINTA | script.js | 1 | How wide the gap the pointer opens is. |
MOLLA | script.js | [7, 4.2] | The spring that brings each stone back: how stiff and how damped. |
SALTO | script.js | 1 | How high the stones hop on a tap. |
OMBRA | script.js | 1 | How dark the shadows are. |
When to use it
As the background of the first screen of a spa, thermal baths or a bath house, a seaside or mountain hotel, a ceramics or stone goods shop, a landscape architecture studio; in general behind a short heading when you want a light, calm and tactile background that answers the pointer. The stones' colours and the accent are changed in the CSS.
On phones
The same animations with the sizes adapted: the stones are smaller and fewer, measured on the short side of the page, and stay clear of the heading; the finger opens the gap while it touches and drags, a tap makes them hop; the page still scrolls vertically.
With reduced motion
The stones are already in place and stay still: no drop, no pointer gap, no hops. The heading and the notes fade in.
Pitfalls
- Drawing the shape, gradients and blurred shadow of twenty stones every frame slows a phone: each stone is drawn once onto a small canvas and then pasted, rotated.
- ctx.filter blur doesn't exist in Safari: the blurred shadow is made with shadowBlur, drawing the shape off the canvas and offsetting the shadow back in.
- With a single step per frame, a long frame makes the collisions jitter: two half steps.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 24 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
