Push and Pull

Physics System

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.

Physics System