About Text Magnetic Field

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.

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.