---
title: "Push and Pull  — Framer component · Best of Framer"
description: "$5.00 · Framer component · by monirul polash · Buttons. Physics System"
canonical: "https://framer.elliotli.dev/component/push-and-pull"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Push and Pull

# Push and Pull

Physics System

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

![Push and Pull  preview image 1](https://framer.elliotli.dev/og/component/push-and-pull/9cbb3517e0ac04ef/1600x1200.jpg)

## Summary

Physics System

## Description

**How to use it:** It’s incredibly simple. This acts as a "Wrapper" component. Just drag and drop it onto your Framer canvas, and connect the purple "Content" slot to _any_ text, image, button, or card. It will instantly gain interactive physics!

### 1\. 🎯 Where can I use this component?

Because you can connect it to absolutely anything on your canvas, the use cases are endless:

-   **Magnetic Buttons:** Create premium, Awwwards-style call-to-action buttons that gently pull toward the user's cursor when they hover nearby.
    
-   **Playful Bento Boxes:** Apply the "Push" force to grid items so they slightly dodge and tilt away when the user moves their mouse over them.
    
-   **Interactive Portfolios:** Make gallery thumbnails or project cover images pop out, scale up, and tumble in 3D as the mouse passes by.
    
-   **Hero Images/Logos:** Give your central graphic a sense of weight and floatiness that reacts instantly to cursor flicks.
    

### 2\. ✨ Features

-   **🧲 Push & Pull Forces:** Dial in the exact behavior. Make the element magnetically snap to the cursor, or act like a reverse-magnet that repels the mouse.
    
-   **🚀 Velocity-Boosted Reactions:** The physics engine calculates cursor speed. A slow mouse movement creates a gentle nudge, while a fast flick creates a massive 3D spin and push effect!
    
-   **🧊 3D Tilt & 2D Spin:** Elements physically tumble, twist, and rotate in 3D space as the invisible force field is breached.
    
-   **⚙️ Advanced Spring Physics:** Fine-tune the Mass, Stiffness, and Damping. Make your element feel like a heavy, sluggish bowling ball or a snappy, weightless feather.
    
-   **📏 Custom Interaction Radius:** You decide exactly how large the invisible "force field" around the element is.
    
-   **🔗 Universal Slot System:** Zero code required. Connect it to literally any existing layer or component in your Framer project.
    

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

-   All · #5330

## Details

- **Author**: monirul polash
- **Price**: $5.00
- **Published**: 2026-03-24
- **Updated**: 2026-03-24
- **Added**: 2026-03-11
- **Categories**: Buttons

## More like this

-   [Shader Buttons](/component/shader-buttons) — Frame Native · Free — A button with shader glow
-   [Bite Button](/component/bite-button) — DariStudio · $5 — Pill button with a bite on hover
-   [Cyber Pearl](/component/cyber-pearl) — VIVID ROOM · $15 — Pearl buttons in chrome and gold
-   [Piano Pearl Button](/component/piano-pearl-button) — VIVID ROOM · $15 — Piano sound and pearl shimmer