---
title: "Magnetic Pattern — Free Framer component · Best of Framer"
description: "Free Framer component · by Ashraf Omran · Backgrounds. Magnetic Pattern auto-fills its container with infinitely tiled shapes that subtly react to the pointer—rotating, scaling, fading…"
canonical: "https://framer.elliotli.dev/component/magnetic-pattern"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Magnetic Pattern

# Magnetic Pattern

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

![Magnetic Pattern preview image 1](https://framer.elliotli.dev/og/component/magnetic-pattern/56172209c0a20e2e/1600x1200.jpg)

## Summary

Magnetic Pattern auto-fills its container with infinitely tiled shapes that subtly react to the pointer—rotating, scaling, fading, and even shifting position—then smoothly reset…

## Description

Turn any frame into a living, responsive mosaic. **Magnetic Pattern** auto-fills its container with infinitely tiled shapes that subtly react to the pointer—rotating, scaling, fading, and even shifting position—then **smoothly reset** when the cursor leaves. Perfect for modern hero sections, product backdrops, or playful UI surfaces.

## Highlights

-   **Auto-tiling grid** that fills any container (Grid or Stagger layouts), now **center-aligned**.
    
-   **Pointer-reactive effects** (toggle per effect):
    
    -   Rotation (symmetry-aware steering)
        
    -   Opacity “spotlight”
        
    -   Scale falloff
        
    -   Position offset (toward or away from cursor)
        
-   **Smooth reset on leave** (eased animation back to idle).
    
-   **Trim edges** toggle to clip or reveal shapes beyond bounds.
    
-   **Three shape modes**: Square, Triangle, or **Custom SVG path** (Single-Path only acceptable).Like: _<path d="M0 0 L10 0 L10 10 L0 10 Z" />_
    
-   **Fine control** over radius, strength, falloff curves, smoothing, and relaxation.
    
-   **Seeded randomness** with jitter for organic layouts.
    
-   **Performance friendly** with rAF throttling and event gating.
    

## Controls (Property Panel)

-   **Layout & Size:** Layout (Grid/Stagger), Gap X/Y, Item W/H, Background.
    
-   **Visuals:** Fill, Stroke, Stroke Width.
    
-   **Shape:** Square / Triangle / Custom Path + Custom Symmetry (None / 180° / 90°).
    
-   **Pointer / Motion:** Track Pointer (master toggle), Base°, Jitter, Seed, Throttle ms.
    
-   **Influence (when tracking):** Radius, Strength, Falloff (Linear/EaseOut/Gaussian), Smoothing, Min Weight, Relax.
    
-   **Effects (when tracking):**
    
    -   Rotate on
        
    -   Opacity on + (Min/Max/Curve)
        
    -   Scale on + (Min/Max/Curve)
        
    -   Position on + (Max px / Curve / Invert)
        
-   **Overflow:** Trim edges (clip vs. show overflow).
    

_Tip: Turning_ **_Track Pointer_** _off hides the pointer-related controls and renders a clean, neutral pattern (no dimming, no offsets) using your Base°._

## Great for

-   Hero/landing backdrops that feel premium but unobtrusive
    
-   Section separators and full-bleed backgrounds
    
-   Subtle motion on product or feature pages
    
-   Interactive wallpapers for dashboards and apps
    

## Design notes

-   **Symmetry-aware rotation** means shapes “snap” their aim to the nearest valid orientation (e.g., 180° for squares/triangles) for satisfying, stable motion.
    
-   The **opacity spotlight** and **scale falloff** are distance-based and curve-controlled for just the right softness.
    
-   **Position offset** adds gentle parallax; invert it to push shapes away from the cursor for a “magnetic repulsion” feel.
    

## Performance tips

-   Use **Throttle ms** to cap pointer update frequency on heavy pages.
    
-   Reduce **Radius** and **Item W/H** or increase **Gap** for weaker devices.
    
-   Turn off effects you don’t need; each toggle removes that work.
    

## Dev-friendly details

-   Uses seeded RNG for stable jitter across reloads.
    
-   Resizes with a ResizeObserver and re-centers automatically.
    
-   All transforms are applied on a per-tile wrapper (transform + opacity), keeping paints efficient.
    

## Refund Policy

-   Refunds apply **only if the component does not work as described** or is proven to be defective.
    
-   Refunds are **not applicable** for change of mind, design preference, or lack of technical knowledge.
    
-   Before requesting a refund, please [**contact support**](https://omran.framer.website/contact) so we can try to resolve the issue.
    

## Accessibility

-   Decorative by default; use it as a non-critical visual enhancement.
    
-   For important content, layer text/components above and ensure sufficient contrast.
    

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

-   All · #5264

## Details

- **Author**: Ashraf Omran
- **Published**: 2025-10-01
- **Updated**: 2025-10-24
- **Added**: 2025-09-18
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background