Falling 2D Draggable Pills

Falling 2D Draggable Pills is a motion component designed for web projects, offering an interactive animation where pill-shaped elements drop one by one into a container. These pills exhibit physics-based behaviors such as bouncing, colliding, and can be dragged using touch or mouse input, creating a playful and touch-friendly experience for users.

The component provides a range of customizable settings. Drop behavior can be adjusted, including the time between each pill's appearance, spawn height, and reveal timing. The arena in which pills fall is defined by configurable walls and a ceiling gate, with parameters for wall thickness, edge padding, and gate opening and closing dynamics. Pills are revealed in a staggered sequence and interact with movable walls and a ceiling gate that can be programmed to open and close after the last drop, with specific animation durations.

Physics properties are finely tunable, including gravity, restitution, friction, air resistance, and density for both the pills and the container boundaries. The component includes anti-stick logic to prevent pills from lingering near the ceiling, applying downward and sideways nudges if they remain in a defined "stuck zone" for too long. Dragging interactions are optimized for both mouse and touch input, with separate stiffness and damping settings for each input type to ensure responsive, natural-feeling manipulation of pills.

Falling 2D Draggable Pills is implemented using the Matter.js physics engine. The setup process involves adding external scripts and custom JavaScript to a web project, making it accessible to developers working with platforms like Webflow, NextJS, or Figma.