skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

matterjs

Implements 2D physics simulations with Matter.js Engine, Render, bodies, and mouse constraints.

3|Updated Apr 20, 2026
Search Tags:#javascript#canvas#web animation#physics engine#2d physics#matter.js#mouse constraint
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill matterjs-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: matterjs
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/matterjs
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill matterjs-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires matter-js.

What problem does it solve? Setting up a 2D physics simulation in the browser requires correctly wiring together Matter.js Engine, World, Render, and Runner, plus handling interactions and cleanup—details that are easy to get wrong without a reference workflow. ## Core Features & Use Cases - Engine and Render Setup: Provides a minimal working Engine/World/Render/Runner configuration with solid (non-wireframe) rendering. - Bodies and Interactions: Shows how to add static and dynamic bodies with Composite.add and attach mouse drag via MouseConstraint. - SPA Cleanup Guidance: Covers stopping the runner, removing the canvas, and clearing the world for single-page app teardown. - Use Case: You are building an interactive landing page where elements fall and collide realistically. Use this Skill to scaffold the Matter.js scene, add draggable bodies, and cleanly destroy the simulation when the user navigates away. ## Quick Start Use the matterjs skill to create a 2D physics scene with a falling box, a static ground, and mouse drag interaction on an 800x600 canvas.

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 Matter.js physics simulation in HTML?▼

Create an Engine, a Render bound to a DOM element, and a Runner, then add bodies with Composite.add. Call Runner.run and Render.run to start the simulation loop and rendering.

How to add mouse drag interaction to Matter.js bodies?▼

Create a Mouse from the render canvas, wrap it in a MouseConstraint, and add it to the world with Composite.add. Also assign render.mouse = mouse so the canvas coordinates stay aligned.

Should I use Matter.Render or a custom renderer?▼

Matter.Render is suitable for debugging and simple scenes since it creates and manages a canvas automatically. Use a custom renderer with Engine.update in your own loop when you need full control over visuals or timing.

How do I clean up Matter.js in a React or SPA app?▼

Stop the loop with Runner.stop(runner), remove the render canvas from the DOM, and clear the engine and world if needed. This prevents duplicate simulations when components remount.

Why are my Matter.js bodies showing as wireframe outlines?▼

Wireframe rendering is the default in Matter.Render. Set wireframes: false in the render options to display solid filled bodies.

Related Skills

Explore More Software Engineering Skills→
120ventures120ventures

mobile-audit

Audit mobile viewports for Core Web Vitals, responsiveness, and navigation issues.

Official
Advanced
Yakoub-aiYakoub-ai
17

phaser-debugger

Diagnose runtime errors, rendering failures, and physics inconsistencies in Phaser 4 projects.

Official
Advanced
adamhjkadamhjk
2

pixijs-scene-sprite

Render and animate images in PixiJS with sprite classes.

Community
Basic
simon-tannasimon-tanna

phaser-gamedev

Build 2D games with Phaser 3 scenes, physics, and tilemaps.

Community
Advanced