Skip to main content

​
Overview

WordMagnet tracks mouse position across the entire window and applies a repulsion force to each word within a configurable radius. Words spring away from the cursor in real time using Framer Motion’s useSpring, then snap back after a configurable delay — creating a magnetic field effect over a block of text.

​
Installation

npx rareui@latest add word-magnet
Requires framer-motion as a peer dependency.
npm install framer-motion

​
Usage

import WordMagnet from "@/components/rareui/Text Animation/WordMagnet";

export default function Hero() {
  return (
    <WordMagnet
      text="Hover over these words and watch them dance"
      textColor="currentColor"
    />
  );
}

​
Props

​
text
string
default:"Hover over these words and watch them dance"
The text content to display. Whitespace-delimited words are each independently tracked and displaced.
​
radius
number
default:"130"
Interaction radius in pixels. Words within this distance from the cursor are repelled.
​
force
number
default:"0.45"
Repulsion force multiplier between 0.1 and 1.0. Higher values push words further away from the cursor.
​
damping
number
default:"28"
Spring damping value between 5 and 50. Lower values produce bouncier return-to-rest behavior.
​
returnDelay
number
default:"400"
Delay in milliseconds before a word springs back to its original position after the cursor moves away.
​
textColor
string
default:"#000000"
CSS color value for the text. Accepts any valid CSS color string.
​
font
React.CSSProperties
A React CSSProperties object controlling font styling. Overrides font size, weight, letter spacing, and line height.
​
disableOnMobile
boolean
default:"false"
When true, the repulsion interaction is disabled on touch devices (viewport width under 768px or ontouchstart present). Words render as static text.
​
overflow
visible | hidden | scroll | auto
default:"visible"
CSS overflow property for the container. Use "hidden" if the repulsion effect should be clipped to the container bounds.
​
className
string
Additional Tailwind or CSS classes applied to the container.
​
style
React.CSSProperties
Inline styles applied to the container. Merged with the font and overflow props.

​
Examples

​
Basic usage

<WordMagnet
  text="Hover over these words and watch them dance"
/>

​
Aggressive repulsion

<WordMagnet
  text="Stay away from me"
  radius={200}
  force={0.8}
  damping={10}
  returnDelay={800}
  font={{ fontSize: "48px", fontWeight: 700 }}
/>

​
Mobile-safe hero headline

<WordMagnet
  text="Build something rare"
  textColor="white"
  disableOnMobile={true}
  font={{ fontSize: "64px", fontWeight: 900, letterSpacing: "-0.05em" }}
/>

​
Features

Physics Repulsion

Per-word spring displacement calculated from cursor distance and angle using real vector math.

Smart Recovery

Words spring back to their original positions after a configurable delay once the cursor moves away.

Throttled Mouse Tracking

Mouse events are throttled to ~60fps using a timestamp check, keeping CPU usage minimal.

Mobile Aware

The disableOnMobile prop gracefully degrades the interaction on touch devices.

Build docs developers (and LLMs) love

Get started for freeTalk to us