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.
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.
Alt3Studio.com
