---
title: "MagnaCard — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Moe Slah · Cards. Physics-powered card grid that reacts to motion and magnetism."
canonical: "https://framer.elliotli.dev/component/magnacard"
---

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

# MagnaCard

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

![MagnaCard preview image 1](https://framer.elliotli.dev/og/component/magnacard/19167154e3652f4d/1600x1200.jpg)

## Summary

Physics-powered card grid that reacts to motion and magnetism.

## Description

## Physics-powered card grid that reacts to motion and magnetism.

### MagnaCards combines magnetic physics, customizable gradients, and fluid motion for a tactile, eye-catching experience. Each card moves organically with your cursor, tilts dynamically, and can display stats, features, or links — all with fine-tuned design control.

## Key Features

-   **Magnetic Motion Physics** — Adjustable _Magnetic Strength_, _Spring Stiffness_, _Damping_, and _Mass_ simulate lifelike motion and magnetic pull.
    
-   **Smart Layout Options** — Control _Title & Content Position_ (top or bottom), toggle _Together_ or _Separate_ display, and choose to _Show/Hide_ content for minimalist layouts.
    
-   **Gradient & Color Customization** — Use solid or gradient backgrounds with adjustable _Start/End Colors_ and _Angle_, plus full _Title_ and _Content Color_ controls.
    
-   **Clickable Cards** — Add a _Link URL_ to any card for interactive navigation or CTAs.
    
-   **Customizable Typography** — Choose separate fonts for titles, subtitles, and content to fit any design system.
    
-   **Flexible Card Design** — Adjust _Rotation Range_, _Padding_, _Gap_, _Separator Styling_, and _Border Radius_ for perfect composition.
    

## Perfect For

-   **Showcasing** metrics, stats, or achievements.
    
-   **Interactive feature** or service highlights.
    
-   **Product storytelling** with motion.
    
-   **Dynamic grid sections** in landing pages.
    

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

-   All · #5498

## Details

- **Author**: Moe Slah
- **Price**: $15.00
- **Published**: 2025-11-07
- **Updated**: 2025-11-11
- **Added**: 2025-11-06
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards