matterjs

Automate Matter.js 2D physics setup across HTML, React, or canvas projects.

1|1|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/RamonsDka/the-architect-overlay --skill matterjs-ramonsdka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: matterjs
Source: https://github.com/RamonsDka/the-architect-overlay/tree/main/skills/matterjs
Command: npx skills add https://github.com/RamonsDka/the-architect-overlay --skill matterjs-ramonsdka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Matter.js empowers developers to implement 2D physics simulations by providing a clear setup pattern for Engine/World, Render, and Runner, plus guidance to add bodies, constraints, and scroll/interactions.

Core Features & Use Cases

  • Provide a repeatable setup for Engine/World/Render/Runner across plain HTML, React, or canvas-based projects.
  • Enable addition of bodies and constraints, with optional mouse interaction and rendering style choices.
  • Use cases include educational demos, interactive simulations, and lightweight physics-driven components in apps.

Quick Start

Initialize Engine, World, Render, and Runner, then add a ground and a dynamic body to observe physics.

Frequently Asked Questions about matterjs

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

FAQPage Schema
How do I set up a 2D physics simulation with Matter.js?▼

To set up a 2D physics simulation with Matter.js, you initialize the Engine, World, Render, and Runner. You then add bodies and constraints to the world to observe physical interactions and rendering.

Can I use Matter.js physics in a React project?▼

Yes, you can use Matter.js in a React project. The setup pattern supports plain HTML, React, or canvas-based projects, providing repeatable initialization and SPA cleanup for physics-driven components.

What is the best way to add bodies and constraints in Matter.js?▼

The best way to add bodies and constraints in Matter.js is by following a repeatable body management pattern. This approach allows you to easily add physical objects and optional mouse interactions to the simulation.

Does Matter.js support mouse interaction in physics simulations?▼

Yes, Matter.js supports mouse interaction. You can enable optional mouse interaction alongside body and constraint management to allow users to directly manipulate objects within the 2D physics world.

How do I handle Matter.js cleanup in a single page application?▼

To handle Matter.js cleanup in a single page application, you use the provided SPA cleanup patterns. These patterns ensure proper teardown of the Engine, World, Render, and Runner when navigating away.