explaingit

liabru/matter-js

18,193JavaScriptAudience · developerComplexity · 3/5StaleLicenseSetup · easy

TLDR

JavaScript library that simulates 2D physics in browsers and Node.js, letting you create games and animations where objects move, collide, and fall realistically.

Mindmap

mindmap
  root((Matter.js))
    What it does
      Physics simulation
      Collision detection
      Gravity and forces
    Features
      Rigid bodies
      Constraints and joints
      Raycasting
      Canvas renderer
    Use cases
      Browser games
      Interactive animations
      Visual experiments
    Tech stack
      JavaScript
      Canvas API
      Node.js compatible
    Getting started
      npm install
      Script tag include
      Plugin system

Things people build with this

USE CASE 1

Build browser-based games with realistic object physics and collisions.

USE CASE 2

Create interactive animations where objects fall, bounce, and stack naturally.

USE CASE 3

Develop visual experiments and simulations like Newton's cradle or cloth dynamics.

USE CASE 4

Add physics-based interactions to web pages and interactive art projects.

Tech stack

JavaScriptCanvas APINode.js

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial projects, as long as you include the original copyright notice.

In plain English

Matter.js is a JavaScript library for simulating 2D physics in web browsers and in Node.js. Physics simulation means the library calculates how objects move, collide, bounce, and fall under the influence of gravity, allowing developers to create games, interactive animations, and visual experiments where objects behave like they would in the real world. The library supports rigid bodies (solid objects that don't deform), compound bodies (complex shapes built from simpler ones), concave and convex shapes, physical properties such as mass and density, friction, air resistance, and collision detection. It also handles constraints (like ropes or joints connecting objects), sleeping (pausing simulation for objects that have stopped moving to save processing power), raycasting (detecting what a ray of light would hit), and time scaling (slowing down or speeding up the simulation). There is a built-in canvas renderer that draws the simulation as 2D graphics, and the library works across major browsers as well as on mobile devices via touch input. Matter.js can be installed via npm or included directly in a webpage via a script tag. The engine can be extended through a plugin system. The project includes a large set of demo scenes, things like Newton's cradle, a wrecking ball, cloth simulation, and various stacking challenges, both as code examples and as a live demo gallery.

Copy-paste prompts

Prompt 1
Show me how to set up Matter.js in a web page and create two falling boxes that collide with the ground.
Prompt 2
How do I create a rope or chain constraint between two objects in Matter.js?
Prompt 3
I want to build a simple game where the player stacks blocks without them falling over. What Matter.js features should I use?
Prompt 4
How can I detect when a ray hits an object in Matter.js and use that for a laser or line-of-sight mechanic?
Prompt 5
Show me how to add a custom plugin to Matter.js to extend its functionality.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.