Magnetic Cards

Magnetic Cards

Turn a simple card grid into a responsive, interactive experience with Magnetic Cards for Framer.

Each card reacts naturally to the pointer, creating a magnetic pull that makes the entire grid feel tactile and alive. Cards can subtly translate, rotate, and scale toward the cursor, while an optional magnetic grid adds gentle repulsion between nearby cards for an even more dynamic interaction.

Preview: https://magneticcards.framer.website/

Great for

• Portfolio projects

• Creative agency websites

• Designer portfolios

• Product showcases

• Case studies

• Team and profile sections

• Service cards

• Feature grids

• Digital products

• Interactive landing pages

• Experimental and motion-focused websites

Features

Magnetic Interaction

Cards are attracted toward the pointer based on distance and configurable magnetic strength. The effect smoothly falls off as the pointer moves away.

Spring-Based Motion

Smooth spring and damping controls create natural movement instead of rigid or instant transformations.

Position, Rotation & Scale

Cards can translate toward the cursor while subtly rotating and scaling for a more tactile interaction.

Customizable Magnetic Radius

Control how far the pointer can influence cards, from a focused interaction to a large magnetic field.

Multiple Activation Modes

Choose between:

• Hover activate while the pointer is inside the component.

• Click toggle the magnetic interaction with a click or keyboard.

• Always keep the interaction active whenever the pointer is inside.

Support

X: @karimsaif https://x.com/karimsaif0

Email: karimsaif010@gmail.com

I’m happy to help with setup, customization, bugs, or questions about using the component in your Framer project.