Physics

Matter.js

2D rigid-body physics for playful interactions.

Live demomatter

Matter.js is a 2D rigid-body physics engine. Great for playful hero sections, draggable “logo soup,” and anything that needs a little weight and bounce. Drag the shapes below.

Install

npm i matter-js

Snippet

import Matter from "matter-js";

const engine = Matter.Engine.create();
const render = Matter.Render.create({ element, engine, options: { width, height } });

// walls + floor
Matter.Composite.add(engine.world, [
  Matter.Bodies.rectangle(width/2, height, width, 20, { isStatic: true }),
]);

// bodies
Matter.Composite.add(engine.world, Matter.Bodies.circle(200, 0, 24));

// mouse drag
const mouseConstraint = Matter.MouseConstraint.create(engine, { element });
Matter.Composite.add(engine.world, mouseConstraint);

Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);