---
title: "MagnetizingLines — Free Framer component · Best of Framer"
description: "Free Framer component · by Shahbaaz Khan · Backgrounds. 🎯 Magnetizing Lines – Interactive Tech Grid Magnetizing Lines is an interactive visual grid of rotating lines that shrink…"
canonical: "https://framer.elliotli.dev/component/magnetizinglines"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/MagnetizingLines

# MagnetizingLines

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

![MagnetizingLines preview image 1](https://framer.elliotli.dev/og/component/magnetizinglines/0aa6b7b4ac9bfafd/1600x1200.jpg)

## Summary

🎯 Magnetizing Lines – Interactive Tech Grid Magnetizing Lines is an interactive visual grid of rotating lines that shrink and orient themselves toward your cursor — like tiny…

## Description

**🎯 Magnetizing Lines – Interactive Tech Grid**

**Magnetizing Lines** is an interactive visual grid of rotating lines that shrink and orient themselves toward your cursor — like tiny magnetic compasses. Perfect for techy hero sections, glitch-style backgrounds, or futuristic interactive canvases.

🧲 The closer your cursor, the more each line bends and shrinks — creating a reactive, hypnotic effect.

**⚙️ Features & Controls**

**Layout & Sizing**

-   **Sizing Mode** (Frame, Fill Frame, Fill Viewport, Custom): Control how the component scales inside your layout.
    
-   **Custom Width & Height**: Only shown when Custom mode is selected (e.g. 80vmin or 600px).
    

**Grid Configuration**

-   **Rows / Columns**: Define the grid density (from 1 to 50 each).
    
-   **Gap**: Control the spacing between each line using any valid CSS unit (e.g. 0px, 1rem, 1vmin).
    

**Line Styling**

-   **Color** 🎨: Pick any line color.
    
-   **Thickness**: Default line width.
    
-   **Thickness Unit**: px, vmin, or rem.
    
-   **Length**: Default line height.
    
-   **Length Unit**: px, vmin, or rem.
    
-   **Rounded Ends** ⚪: Toggle between rectangular and pill-shaped lines.
    
-   **Base Angle**: Set a static rotation angle (before cursor influence).
    

**Magnetic Interactivity**

-   **Magnetize Effect** 🧲: Enable or disable cursor-driven shrinking and rotation.
    
-   **Radius**: How close the cursor needs to be to affect lines.
    
-   **Minimum Thickness**: Smallest width when fully shrunken.
    
-   **Minimum Length**: Smallest height near the cursor.
    
-   **Falloff**: Choose between Linear (uniform change) or Smooth (eased shrink curve).
    

**💡 Use Cases**

-   Tech hero sections that feel **alive and reactive**
    
-   Glitch-style **ascii art backdrops**
    
-   Generative, animated **motion texture**
    
-   Scroll-triggered or hover-triggered **visual feedback**
    
-   **Creative cursor effects** for interactive UI sections
    

**🧰 Pro Tips**

-   Use **vmin** units for responsiveness
    
-   Combine with **Framer scroll triggers** for layered animation
    
-   Dark mode? Try **light lines on black** for max contrast
    
-   Want subtle animation? Lower the thickness and enable smooth falloff
    

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

-   All · #5133

## Details

- **Author**: Shahbaaz Khan
- **Published**: 2025-10-02
- **Updated**: 2025-10-02
- **Added**: 2025-09-26
- **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