Text Magnetic Field

What is 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. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Cursor-reactive magnetic text distortion