Matter.js Falling Tags — Draggable Physics Chips

Physics-driven "skill chips that tumble into a pile" is one of the most-copied effects on award-winning portfolio sites, and almost every tutorial builds it the wrong way: they let Matter.js draw everything into its own <canvas> using Matter.Render. That is fine for a physics demo and useless for a real interface — canvas-drawn labels are not selectable, not readable by a screen reader, not stylable with CSS, and not indexable by search engines.

This snippet does it the way production sites do. The chips stay real DOM elements with real text, real border-radius, real box-shadows. Matter.js runs an invisible rigid-body simulation alongside them, and every frame each element's transform is written from its matching body's position and angle. You get genuine physics on genuine HTML.

Measuring first, simulating second

Each chip is measured before it gets a body:

var w = el.offsetWidth, h = el.offsetHeight;

That measurement is what makes the collision shape match what the user actually sees. "Tailwind" is a wider chip than "Go", so it needs a wider body — hard-coding one size for all of them produces the classic broken version where short chips float on invisible padding and long ones overlap.

The bodies are created with chamfer: { radius: h / 2 }, which rounds the rectangle's corners by half its height, turning the collision shape into a true pill that matches the CSS border-radius: 99px. Without the chamfer the physics body has square corners while the visual has round ones, and chips visibly snag on each other's invisible edges — the single most common giveaway that a physics-chip effect was built carelessly.

The sync loop

The bridge between simulation and DOM is four lines inside a requestAnimationFrame loop:

p.el.style.transform = 'translate(' + (pos.x - p.w / 2) + 'px,' + (pos.y - p.h / 2) + 'px) rotate(' + p.body.angle + 'rad)'

Two details matter. Matter.js positions bodies by their center, while CSS translate on an absolutely positioned element moves its top-left corner — so half the width and height are subtracted to convert between the two coordinate conventions. And body.angle is in radians, which is why the CSS uses rotate(...rad) rather than converting to degrees; CSS accepts radians natively, so the conversion is free.

Only transform is written — never top or left — so the browser composites the movement without recalculating layout for ten elements sixty times a second.

Dragging, and the wheel-event trap

MouseConstraint is what makes the pile grabbable: it creates a spring between the pointer and whichever body is under it, with stiffness: 0.16 giving a soft elastic pull rather than a rigid snap. Bodies dragged into the stack shove the others out of the way, because the constraint feeds forces back into the same solver.

There is a trap here that catches almost everyone. Matter.Mouse binds wheel listeners to its element by default, so a stage placed mid-page swallows page scrolling — the user's wheel does nothing and they cannot scroll past your section. Removing mouse.mousewheel from both mousewheel and DOMMouseScroll releases it. The guard around it exists because the property name has moved between Matter versions.

Walls, and why they are oversized

Three static bodies form the floor and side walls. They are deliberately far larger than the visible stage — W * 3 wide, H * 4 tall, 120px thick — because thin walls in a discrete-step solver can be tunneled through by a fast body that moves further in one step than the wall is deep. A thick, oversized wall makes escape geometrically impossible, which is much cheaper than enabling continuous collision detection. There is no ceiling on purpose: chips spawn above the stage at negative Y and fall in.

The resize handler repositions the three walls with Body.setPosition rather than rebuilding the world, so a rotated phone or a dragged window doesn't strand the pile outside the new bounds.

Reusing it

Swap the chip text for skills, tags, product categories, or filter values and the simulation adapts automatically, since every body is measured from its element. Raise restitution for a bouncier pile, raise frictionAir for a floatier one. It sits naturally beside a tag cloud as its playful counterpart, or a physics balls canvas if you want to see the same ideas without a library.