Falling tools

Tool pills fall into a box with real physics: they bounce, pile up, and can be grabbed with the mouse or a finger and thrown.

Physics, HoverCSS onlyMediumLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* Attrezzi che cadono
   Gli attrezzi sono pillole HTML vere. Matter.js tiene un corpo per ognuna (un rettangolo con gli
   angoli arrotondati quanto metà dell'altezza) e a ogni fotogramma la pillola prende posizione e
   rotazione del suo corpo. Quando la cassetta entra nello schermo gli attrezzi cadono dall'alto uno
   dopo l'altro; si prendono col mouse o col dito, si trascinano e si lanciano. */

/* ---- valori da cambiare ---- */
const GRAVITA = 1.1;
const RIMBALZO = 0.3;       /* quanto rimbalzano (restitution) */
const ATTRITO = 0.4;
const RIGIDITA = 2.5;       /* moltiplica l'inerzia: più è alta, meno si capovolgono e restano leggibili */
const INTERVALLO = 90;      /* millisecondi fra un attrezzo e il successivo quando cadono */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const cassetta = document.querySelector('[data-cassetta]');
const scuoti = document.querySelector('.scuoti');
const elementi = [...document.querySelectorAll('.attrezzo')];

if (RIDOTTO || !window.Matter) {
  /* niente fisica: gli attrezzi stanno in fila, leggibili, e il pulsante non serve */
  document.documentElement.classList.add('ferma');
  scuoti.removeAttribute('data-autoclic');
} else {
  const { Engine, Bodies, Body, Composite, Constraint } = Matter;
  const motore = Engine.create();
  motore.gravity.y = GRAVITA;

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

When the box enters the screen, the tools, coloured pills with a name each, fall from the top one after another, bounce on the bottom and pile up crooked like real objects. Each one can be grabbed with the mouse or a finger, dragged and thrown: the others get pushed away. The button at the top shakes the box and makes them all jump.

How it works

Real pills, invisible bodies

The pills are HTML elements (text readable by screen readers, styled with CSS). For each one Matter.js creates a rectangle with corners rounded to half its height: the same shape, but invisible.

Fixed step

Physics advances in 1/60 s steps with an accumulator, independent of frames: with variable steps Matter becomes unstable. After each step the pills copy their bodies’ position and rotation through a transform.

Readable while falling

Every body’s inertia is multiplied by 2.5: the pills tilt and roll little, so they almost never end up upside down.

Grab and throw

On pointerdown an elastic constraint ties the grabbed point to the pointer; moving moves the constraint’s end. On release the constraint goes away and the pill’s speed becomes the throw. setPointerCapture keeps the drag going outside the pill.

Values to change

Name	File	Default	What it changes
`GRAVITA`	script.js	`1.1`	Gravity: higher, they fall faster and bounce less.
`RIMBALZO / ATTRITO`	script.js	`0.3 / 0.4`	How much they bounce and how much they grip each other.
`RIGIDITA`	script.js	`2.5`	Multiplies rotational inertia: higher, they flip less.
`INTERVALLO`	script.js	`90`	Milliseconds between one drop and the next.

When to use it

For a list that does not need to be read in order: tools, skills, clients, ingredients. It is a toy: the same information should also be there in a normal form.

On phones

It works with a finger. Only the pills block scrolling (touch-action none): touching outside the pills scrolls the page normally.

With reduced motion

No physics: the pills sit in a row, still and readable.

Pitfalls

Measure the pills before creating the bodies, with the font already loaded: a body wider than its pill leaves gaps between pieces.
Stop the physics when the box leaves the screen: otherwise the engine runs for nothing and the phone heats up.
Walls must rise well above the box: objects start from above and, thrown upwards, would otherwise leave sideways and never come back.
If the box changes size, rebuild the walls and bring back whoever ended up outside, or rotating the phone makes half the pills vanish.

Libraries

Matter.js 0.20.0, Mona Sans (font variabile) 5.3.0.

Weight: 10 KB of our own files.

Testing

Tested on 27 September 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

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.

From the same family

Marquee that speeds up with scroll

Scroll, Text, Hover

Lifetime

Stacking certificates

Hover, Images

NewLifetime

Jumping letters

Text, Hover

NewFree

All animations