---
title: "Magnetic Cards — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Karim Saif · Cards. Magnetic Cards for Framer."
canonical: "https://framer.elliotli.dev/component/magnetic-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Magnetic Cards

# Magnetic Cards

Cards can subtly translate,rotate

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

![Magnetic Cards preview image 1](https://framer.elliotli.dev/og/component/magnetic-cards/fb3df3d6c8355f21/1600x1061.jpg)

## Summary

Magnetic Cards for Framer.

## Description

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/](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](https://x.com/karimsaif0)

**Email:** [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com)

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

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

-   All · #2822

## Details

- **Author**: Karim Saif
- **Price**: $6.00
- **Published**: 2026-09-14
- **Updated**: 2026-09-16
- **Added**: 2026-09-14
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator