Interactive Physics
Drag the shapes around and watch them interact with the content
Explore the Physics
The colorful shapes above are physics-enabled objects that respond to gravity and collisions. Try dragging them around with your mouse or finger!
They'll bounce off the edges of your screen and interact with the image blocks on this page. Watch how they settle on top of images as you scroll.
Scroll and Interact
As you scroll down the page, the physics objects will interact with the content blocks that come into view. The shapes can rest on top of images and videos, creating a playful, interactive experience.
The physics engine ensures smooth, realistic motion across all devices, from desktop to mobile.
Built with Matter.js
This interactive experience is powered by Matter.js, a 2D physics engine for the web. It handles all the complex calculations needed for realistic motion, collisions, and interactions.
Press 'D' or click the debug button to see the collision boundaries!