Drop Lab

✦ DropLab : Physics-powered interaction Engine

Most "physics" components fake it: a spring curve, an ease out, a bounce reset to zero. Drop Lab doesn't animate the fall, it simulates it. Matter.js runs a fixed 60fps timestep under everything you see, with real mass, real friction, real collision, and sleep state bodies that cost nothing once settled. No entrance keyframes, no exit fades. Objects spawn solid, mid air, and gravity does the rest.

FOUR WAYS IN

🟣 ✦ DRAW : hold, trace, release. A marching squares contour pass reads your stroke pixel by pixel and builds a real collider, not a bounding box. Draw a blob, a star, your initials. It falls like it means it.

🔵 ✦ DROP : cubes, spheres, hexes, capsules. Chamfered, gradient lit, shaded like it was rendered, not faked with a box shadow.

🟢 ✦ SLOT : drop in a live Framer component. Alpha shape detection traces the actual visible pixels, not the rectangle, so a transparent PNG collides like its silhouette. Auto detects sticker vs frame.

🟠 ✦ LIGHT : a cursor driven glow dims what's far and lifts what's close. Every object gets its own specular highlight, repositioned per frame.

DETAILS THAT DON'T SHOW UP IN A PREVIEW

◆ Contact shadows scale and soften with height, real perspective correct scaling

◆ Impact squash on landing, mass aware and tunable, gone before your eye catches it

◆ Cursor push field with falloff, no click required

◆ Drag and throw with real momentum transfer

◆ IntersectionObserver gated, pauses off screen

◆ Full property control coverage: gravity, bounce, drop source/order, lighting radius, grid, theme

BUILT FOR THE CANVAS

Every value in the preview is the value in production. Auto light/dark theme. Transparent background support. Grouped, contextual controls that hide what you don't need until you need it.

Grab something. Throw it. Watch the shadow catch up a beat before the object does.