Physics Stack

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.

How It Works

1. Add PhysicsStack: Drag the PhysicsStack component into your Framer canvas.

2. Create Frames: Make all the frames you want to interact (text, images or shapes).

3. Name Your Frames: Give each frame a clear name for easy identification.

4. Select Frames: In PhysicsStack’s Children section, pick the frames you want to include.

5. Preview: Hit Preview to see your frames collide, bounce and interact naturally.

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

Key Features

1. Drag & Drop: Move frames freely with mouse or touch.

2. Collisions: Frames bounce and react like real objects.

3. Physics Presets: Quick options for different behaviors - Default, Bouncy, Heavy, Low Friction, Windy Day and Custom.

4. Customizable Physics: Adjust gravity, friction, bounce, and drag.

5. Smooth Performance: Optimized for Framer Preview and Publish.

6. No Coding Needed: Works visually - just drag your frames inside.

Perfect For

• 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

License / Credits

Physics powered by Matter.js v0.19.0 (MIT License)