---
title: "Text Magnetic Field — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Text. What is Text Magnetic Field?"
canonical: "https://framer.elliotli.dev/component/text-magnetic-field"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Magnetic Field

# Text Magnetic Field

Cursor-reactive magnetic text distortion

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

![Text Magnetic Field preview image 1](https://framer.elliotli.dev/og/component/text-magnetic-field/a8d189ce946994cb/1600x1200.jpg)

## Summary

What is Text Magnetic Field?

## Description

## What is Text Magnetic Field?

Text Magnetic Field is a text animation component. Each character reacts to cursor proximity with physics-based displacement, elastic spring-back, rotation, and scale. A flowing color wake trails behind the cursor as it moves through the text, leaving a fading glow. Ideal for hero headlines, landing page headers, portfolio titles, and any text that needs to feel alive and responsive.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Three magnetic field modes — Repel pushes characters away from the cursor, Attract pulls them in, and Vortex creates a swirling motion around the cursor position
    
-   Color wake trail — Characters light up with a two-tone color gradient as the cursor passes over them, then slowly decay back to the base color with a configurable fade speed
    
-   Elastic spring physics — Characters rubber-band back into position with adjustable elasticity, creating satisfying, organic motion that feels physical
    
-   Idle breathing animation — When the cursor is away, characters gently oscillate with a multi-wave breathing pattern for an ambient, living feel
    
-   Six built-in theme presets — Plasma, Arctic, Solar, Phantom, Neon, and Monochrome, or fully customize your own color palette
    

## Controls inside Framer

### Text and Typography

-   Text — Multi-line text input with line break support
    
-   Font — Native Framer font picker with weight selection
    
-   Font Size — 20px to 300px with stepper
    
-   Letter Spacing — Fine-tune character spacing
    
-   Line Height — Adjust vertical rhythm between lines
    
-   Alignment — Left, Center, or Right
    
-   Uppercase — Toggle uppercase transformation
    

### Theme and Colors

-   Theme — Choose from six curated presets or go fully custom
    
-   Text Color — Base character color
    
-   Wake Primary — Primary glow color for the cursor trail
    
-   Wake Secondary — Secondary blend color for depth
    

### Magnetic Field

-   Mode — Repel, Attract, or Vortex interaction style
    
-   Radius — How far from the cursor characters are affected (50px to 400px)
    
-   Strength — Maximum displacement distance (5px to 80px)
    
-   Elasticity — Spring-back speed, lower values create bouncier, more elastic returns
    
-   Rotation — Maximum character tilt angle in the field
    

### Color Wake

-   Enabled — Toggle the color trail on or off
    
-   Intensity — How vivid the wake color appears
    
-   Decay — How slowly the wake fades out, higher values create longer trails
    

### Idle Breathing

-   Toggle on or off — Gentle ambient wave motion when the cursor is not interacting with the text
    

## Best use cases

-   Hero sections and landing page headlines that need to feel interactive and premium
    
-   Portfolio and agency websites where cursor interaction adds personality and delight
    
-   Product launch pages and creative studios that want to stand out with physics-based text
    
-   Event and conference sites where dynamic typography creates excitement
    

**Make your text feel magnetic.** Drop in, choose a mode, and let your headlines react to every cursor movement with elastic, glowing precision.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #4703

## Details

- **Author**: Aidan Looker
- **Published**: 2026-04-09
- **Updated**: 2026-06-13
- **Added**: 2026-03-28
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing