---
title: "Magnetic Shapes — Free Framer component · Best of Framer"
description: "Free Framer component · by Vaibhav Khulbe · Interactive. Magnetic Shapes brings interactive, playful visuals to your Framer projects with fully customizable motion-driven grids of lines or emojis."
canonical: "https://framer.elliotli.dev/component/magnetic-shapes"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Magnetic Shapes

# Magnetic Shapes

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

![Magnetic Shapes preview image 1](https://framer.elliotli.dev/og/component/magnetic-shapes/41237abc09185068/1600x1200.jpg)

## Summary

Magnetic Shapes brings interactive, playful visuals to your Framer projects with fully customizable motion-driven grids of lines or emojis.

## Description

Magnetic Shapes brings interactive, playful visuals to your Framer projects with fully customizable motion-driven grids of lines or emojis. Perfect for adding modern interaction, depth, and energy to your websites.

## ✨ Features:

-   **Grid-based layout** — create responsive grids with customizable rows and columns.
    
-   **Two content modes:**
    
    -   **Lines mode** with single-color or gradient-colored shapes.
        
    -   **Emoji mode** with a fallback emoji or custom emoji set, randomly assigned with a seed for deterministic layouts.
        
-   **Shape customization (Lines mode):**
    
    -   Adjustable width, height, and corner radius.
        
    -   Single-color or gradient coloring with seed-based hue randomness.
        
-   **Emoji customization (Emoji mode):**
    
    -   Single fallback emoji or entire emoji sets.
        
    -   Adjustable emoji size and opacity.
        
    -   Seed control for repeatable random distribution.
        
-   **Motion controls:**
    
    -   Lines and emojis rotate smoothly toward the cursor.
        
    -   Adjustable base angle for initial orientation.
        
    -   Transition timing controls with easing.
        
    -   Magnet Strength control — fine-tune how snappy or smooth the rotation feels.
        
-   **Auto-rotation (virtual pointer mode):**
    
    -   Off, Always, or When Idle modes.
        
    -   Configurable speed (rotations per minute).
        
    -   Adjustable radius for the rotation path.
        
    -   Idle delay (ms) before auto-rotation activates, even with cursor resting inside.
        
-   **Particle mode effects:**
    
    -   Repel or attract elements to the cursor like magnetic particles.
        
    -   Adjustable influence radius.
        
    -   Max offset distance per element.
        
    -   Strength and falloff curve controls for natural motion.
        
-   **Hover focus effects:**
    
    -   Highlight the hovered item with customizable scale.
        
    -   Fade all other items with adjustable opacity.
        
-   **Connector lines (Lines mode only):**
    
    -   Draw live preview lines when aiming between items.
        
    -   Smooth, animated connector lines when a connection is completed.
        
    -   Adjustable color, thickness, opacity, and animation duration.
        
-   **Advanced animation settings:**
    
    -   Fully controllable transition durations for rotation, scaling, and opacity.
        
    -   Smooth stroke-draw animations for connector lines.
        
-   **Accessibility support:**
    
    -   ARIA labels for emoji mode.
        
    -   Non-interfering with pointer events.
        

Magnetic Shapes is designed for maximum flexibility. Whether you’re building a sleek portfolio, playful landing page, or immersive interactive section, you can fine-tune every detail — from emoji distribution to motion physics — without writing a single line of code.

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

-   All · #5966

## Details

- **Author**: Vaibhav Khulbe
- **Published**: 2025-09-23
- **Updated**: 2025-10-29
- **Added**: 2025-09-18
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase