skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

matterjs

Configure Matter.js Engine, Render, and Runner for 2D physics scenes.

4.5k|536|Updated Feb 3, 2026
Search Tags:#rendering#2d physics#matterjs#interactive canvas#scroll interactions#mouse drag#spa cleanup
One-click install
npx skills add https://github.com/MengTo/Skills --skill matterjs-mengto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: matterjs
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/matterjs
Command: npx skills add https://github.com/MengTo/Skills --skill matterjs-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Matter.js skills help you implement 2D physics interactions reliably instead of guessing engine setup details, rendering configuration, and teardown behavior.

Core Features & Use Cases

  • Engine/World setup that works immediately: create an Engine, configure Render (debug or custom), and run a Runner with a minimal, repeatable scaffold.
  • Body and constraint composition: add common rigid bodies and constraints using Composite so the simulation behaves as expected.
  • Interaction + cleanup patterns: optionally add mouse drag via MouseConstraint and include SPA-friendly teardown steps to prevent leaks or duplicated canvases.
  • Use case: build a scroll/interaction-friendly canvas scene (e.g., draggable UI elements, physics-based decorations, or interactive landing-page effects).

Quick Start

Use the matterjs skill to implement a 2D physics canvas by creating a Matter Engine, adding a Matter.Render and Runner, then composing bodies into the world and configuring mouse interaction only if needed.

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 engine with Matter.js for a web canvas?▼

To set up 2D physics interactions with Matter.js, initialize an Engine, configure a Render instance for debug or custom output, and start a Runner to continuously update the world state on your canvas.

How do I add draggable UI elements using Matter.js MouseConstraint?▼

You can add draggable UI elements by wiring a MouseConstraint into the Matter.js World, enabling pointer-driven interaction so users can drag rigid bodies across the interactive canvas dynamically.

Why does my Matter.js canvas duplicate or leak memory in a single page application?▼

Your Matter.js canvas duplicates or leaks memory because the Runner is not stopped and the render canvas is not removed during SPA navigation, requiring proper SPA-safe teardown steps to prevent leaks.

What is the best way to compose rigid bodies and constraints in a Matter.js world?▼

The best way to compose rigid bodies and constraints in a Matter.js world is using Composite.add, ensuring that common bodies and constraints are grouped properly so the physics simulation behaves as expected.

Does this Matter.js setup work with custom rendering instead of the default debug view?▼

Yes, this Matter.js setup works with custom rendering by configuring the Render instance for either debug output or custom rendering, allowing you to build interactive landing-page effects and physics-based decorations.

Related Skills

Explore More Software Engineering Skills→
RamonsDkaRamonsDka
1

matterjs

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

Community
Intermediate
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate
yldgioyldgio
8

Canvas Design

Create interactive HTML5 Canvas visuals and animations in the browser.

Community
Advanced
assofohdzassofohdz
25

moss-physics

Integrate the Moss physics library into Subspace Infinity Java game client and server.

Community
Intermediate