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.