matterjs

Set up Matter.js 2D physics with engine, world, bodies, and rendering.

59|14|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/guilhermemarketing/esc-skills --skill matterjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: matterjs
Source: https://github.com/guilhermemarketing/esc-skills/tree/main/skills/matterjs
Command: npx skills add https://github.com/guilhermemarketing/esc-skills --skill matterjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Matter.js is a lightweight 2D physics engine helper that streamlines building interactive physics scenes in web apps, reducing boilerplate.

Core Features & Use Cases

  • Engine/World setup: Quick bootstrap of Matter.js Engine, World, and rendering.
  • Bodies and constraints: Add bodies and constraints to simulate rigid-body physics.
  • Interaction-ready: Optional mouse constraint and responsive canvases for demos and tutorials.

Quick Start

Create a minimal Matter.js scene with an engine, world, and a couple of bodies to demonstrate gravity and collisions.

Frequently Asked Questions about matterjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up 2D physics interactions in an HTML canvas?

To set up 2D physics interactions in an HTML canvas, use a Matter.js helper to bootstrap the engine, world, and rendering configuration, reducing boilerplate for rigid-body simulations.

Does Matter.js work with React for building interactive physics scenes?

Yes, Matter.js works with React for building interactive physics scenes by providing a ready-to-use setup that supports modular patterns and responsive canvases within web applications.

How do I add bodies and constraints for rigid-body physics simulations?

You add bodies and constraints for rigid-body physics simulations by utilizing the Matter.js setup to define objects, simulate gravity, and handle collisions effectively.

Can I enable mouse interaction for a 2D physics engine in a web app?

Yes, you can enable mouse interaction for a 2D physics engine in a web app by applying the optional mouse constraint feature included in the setup.

What is the best way to manage cleanup and teardown for physics engines?

The best way to manage cleanup and teardown for physics engines is to enforce modular patterns with clean teardown requirements, ensuring proper resource disposal.