GravityPills

A highly interactive, 60fps physics-based component powered by Matter.js. Perfect for showcasing skill stacks, categories, or creating playful, high-engagement hero sections.

Core Features:

• True 2D Physics: Grab, drag, throw, and watch pills collide with realistic gravity, friction, and elasticity.

• Premium Design Ready: The perfect dynamic element to highlight your brand's core pillars—whether that is Art Direction, No-code development, or Premium Design.

• Fully Customizable: Tweak throw power, bounce (restitution), gravity, and drag tightness directly in the Framer properties panel.

• Granular Theming: Use a global color theme or apply unique background, text, and border colors to every single pill individually.

• Scroll or Load Triggers: Choose whether the pills drop immediately on load or wait until the component scrolls into the user's viewport.

Bulletproof Performance (Under the Hood):

• Zero-Crash React Logic: Re-engineered array dependencies completely eliminate canvas refreshing on click, meaning users can interact as aggressively as they want without breaking the engine.

• Infinite Stacking Limits: Expanded the invisible vertical boundaries, allowing you to drop dozens of pills into the scene without any getting stuck off-screen.

• Memory Leak Protection: Built-in cleanup for Matter.Mouse.clearSourceEvents() ensures the component stays lightweight and runs at a buttery smooth 60fps across all devices.

Setup in Seconds:

• Drop the component into any Stack.

• Set Width to Fill.

• Add your text to the Badges List and watch them drop.