Magnet Text for React

Magnet Text pulls letters towards the pointer as it passes, each by its own distance, like iron filings near a magnet: letters below the pointer rise to meet it, letters above it dip, and along the line they tip and gather in around it. When the pointer leaves, they spring home with a little overshoot.

Use it for a headline, a name or a call to action that should feel alive under the pointer. To stretch letters towards the pointer instead of moving them, use Elastic Text; to thicken them, Variable Proximity; to part them, Kerning Text. The letters' centres are measured once as the pointer enters; each move writes the pointer's position to two CSS variables, and a CSS utility the install adds to your stylesheet works out each letter's translate and rotate from its offset to the pointer and its nearness, capped, and a CSS transition with a slight overshoot carries it there. There's no animation library and no frame loop.

Installation

Usage

import { MagnetText } from "@/components/ui/magnet-text";

<h1>
  <MagnetText text="Magnetic" />
</h1>

Demos

Intensity

intensity is how hard the letters are pulled and the farthest they go: subtle for a twitch, medium, the default, for a headline, strong for letters that reach. radius is how far from the pointer letters feel the pull, 160 pixels by default.

Link

Inside a link or a button, keyboard focus draws each word's letters a little towards its middle, a still state that needs no pointer.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. Words wrap whole, and the line keeps its direction on a right-to-left page. Letters move by a fraction of their size, 0.15em and 10° at most by default, and never into each other, so the text stays readable while it moves. With reduced motion the letters still follow the pointer, without the spring.

FAQ

API Reference