Skip to content

component

Drop Lab

By Quzmo Studios ™

Details

Summary

Drop Lab doesn't animate the fall, it simulates it.

Description

✦ 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.

Introduction

Physics-powered Framer interaction

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100114798/278/319/59/109/15
  • All · #1479