Word Magnet — React Component

Cursor-reactive text where whole words gently repel from the pointer and spring back without splitting letters.

Motion Effectshoverspringtextcursormagnetichoverspringframer-motion

Word Magnet

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

text

Text split into magnetic word tokens.

radius

Pointer influence radius in pixels.

force

Repulsion strength applied to nearby words.

damping

Spring damping for the return motion.

returnDelay

Delay before a word springs back after being pushed.

disableOnMobile

Disables pointer motion on touch and small screens.

wordClassName

Classes applied to each individual word.

Generated JSX

Copy this into your page.

<WordMagnet
  text="Magnetic words react to your cursor and snap back into place"
  radius={130}
  force={0.45}
  damping={28}
  returnDelay={360}
  disableOnMobile={true}
  wordClassName=""
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Word Magnet

Word Magnet is a physics-based word layout where individual words repel from cursor proximity using Framer Motion spring animations. Words scatter outward as the mouse approaches and snap back with spring physics when it moves away. Each word is an independent motion element with its own spring configuration. Add it to hero sections or decorative text displays as a memorable interactive moment that rewards visitors who move their cursor into the text.

Common use cases

Hero section decorative text
Interactive brand and tagline displays
Portfolio and creative agency heroes
Playful landing page interaction elements