Physics Stack adds natural drag, movement and collision effects to your Framer projects. Simply place your frames inside the component and they will move, bounce and interact like real objects.
Everything is fully customizable from the properties panel - adjust gravity, movement strength and bounce to match your design style.
Designed for smooth performance and easy setup, this component works perfectly in Preview and Live site.
Add PhysicsStack: Drag the PhysicsStack component into your Framer canvas.
Create Frames: Make all the frames you want to interact (text, images or shapes).
Name Your Frames: Give each frame a clear name for easy identification.
Select Frames: In PhysicsStack’s Children section, pick the frames you want to include.
Preview: Hit Preview to see your frames collide, bounce and interact naturally.
Customize Physics: Choose a preset (Default, Bouncy, Heavy, Low Friction, Windy Day) or tweak Gravity, Bounciness, Friction, Drag, and Density by selecting Custom option.
Tip: In Canvas you’ll see a placeholder and the real physics happen when you Preview or Publish.
Drag & Drop: Move frames freely with mouse or touch.
Collisions: Frames bounce and react like real objects.
Physics Presets: Quick options for different behaviors - Default, Bouncy, Heavy, Low Friction, Windy Day and Custom.
Customizable Physics: Adjust gravity, friction, bounce, and drag.
Smooth Performance: Optimized for Framer Preview and Publish.
No Coding Needed: Works visually - just drag your frames inside.
Portfolio websites
Landing pages
Product showcases
Agency websites
Interactive galleries
Presentations
Education or tutorials
Creative web apps
Marketing visuals
Game mockups
Interactive dashboards
Social media previews
Hero sections
Animation experiments
Experimental layouts
Physics powered by Matter.js v0.19.0 (MIT License)
Physics Stack adds natural drag, movement and collision effects to your Framer projects. Simply place your frames inside the component and they will move, bounce and interact like real objects.
Everything is fully customizable from the properties panel - adjust gravity, movement strength and bounce to match your design style.
Designed for smooth performance and easy setup, this component works perfectly in Preview and Live site.
Add PhysicsStack: Drag the PhysicsStack component into your Framer canvas.
Create Frames: Make all the frames you want to interact (text, images or shapes).
Name Your Frames: Give each frame a clear name for easy identification.
Select Frames: In PhysicsStack’s Children section, pick the frames you want to include.
Preview: Hit Preview to see your frames collide, bounce and interact naturally.
Customize Physics: Choose a preset (Default, Bouncy, Heavy, Low Friction, Windy Day) or tweak Gravity, Bounciness, Friction, Drag, and Density by selecting Custom option.
Tip: In Canvas you’ll see a placeholder and the real physics happen when you Preview or Publish.
Drag & Drop: Move frames freely with mouse or touch.
Collisions: Frames bounce and react like real objects.
Physics Presets: Quick options for different behaviors - Default, Bouncy, Heavy, Low Friction, Windy Day and Custom.
Customizable Physics: Adjust gravity, friction, bounce, and drag.
Smooth Performance: Optimized for Framer Preview and Publish.
No Coding Needed: Works visually - just drag your frames inside.
Portfolio websites
Landing pages
Product showcases
Agency websites
Interactive galleries
Presentations
Education or tutorials
Creative web apps
Marketing visuals
Game mockups
Interactive dashboards
Social media previews
Hero sections
Animation experiments
Experimental layouts
Physics powered by Matter.js v0.19.0 (MIT License)
