---
title: "Physics Stack — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Khizer Javed · Sections. Physics Stack adds natural drag, movement and collision effects to your Framer projects."
canonical: "https://framer.elliotli.dev/component/physics-stack"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Physics Stack

# Physics Stack

Drag, Collide Frames Interactively

[View on Framer](https://framer.com/marketplace/components/physics-stack/?via=elliot-li)

![Physics Stack preview image 1](https://framer.elliotli.dev/og/component/physics-stack/1cdbd1da47a831e5/1600x1200.jpg)

## Summary

Physics Stack adds natural drag, movement and collision effects to your Framer projects.

## Description

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)**

## Rank history [How rankings work →](/terms#rankings)

-   All · #10367

## Details

- **Author**: Khizer Javed
- **Price**: $7.00
- **Published**: 2026-02-23
- **Updated**: 2026-10-08
- **Added**: 2026-02-11
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove