Word Magnet

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

Motion Effectshoverspringtextcursormagnetichoverspringframer-motion

Word Magnet

Moveyourcursorthroughthismagneticheadlineandwatcheverywordgentlydriftasidebeforesnappingbackintoacleanreadablerhythm

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.

Installation

Word Magnet

Shape the component before you copy it.

Animation effects