Word Magnet Rotation

Word Magnet Rotation
Word Magnet Rotation

About Word Magnet Rotation

The Word Magnet component makes text feel alive. Each word responds to your cursor with a gentle magnetic pull and optional rotation, then smoothly settles back using spring-based motion. You can easily control the amount of rotation to add a soft sense of tilt and direction, keeping the interaction playful while staying easy to read.

Key Features

  • Radius (50–300px): How far the cursor reaches

  • Force (0.1–1.0): How strong the pull feels

  • Rotation (0–30°): Adds a subtle tilt per word

  • Stiffness (10–400): How quickly words snap back

  • Damping (5–50): How smooth or bouncy the motion is

  • Return Delay (0–1000ms): Pause before returning to rest

It supports full typography controls, works with multi-line text, and adapts to different layouts.

From Sally Yang

Dual Fonts
Infinite Zoom
3D Card Rotation
3D Tilt Carousel

Related Components

METABALLTEXT
Image Masked Text
Motion Text Reveal
Rotating Text Navbar