Push and Pull

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.