Magnetic Text

Per-letter cursor-tracking text effect. Every glyph leans toward the pointer under its own spring; linear falloff inside the configured radius, capped at the configured strength. Soft white glow fades in near the cursor. Wrapper carries an aria-label; per-glyph spans are aria-hidden so screen readers never spell the word out.

UniqueUI CLI

npx uniqueui add magnetic-text

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/magnetic-text.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

import { MagneticText } from "@/components/ui/magnetic-text";

export default function Example() {
  return (
    <div className="flex min-h-[40vh] items-center justify-center bg-[#0a0a0a] p-10">
      <MagneticText
        as="h2"
        text="Motion, where it matters."
        className="text-4xl font-semibold tracking-tight text-white sm:text-6xl"
        animateEntry
      />
    </div>
  );
}

Props

Prop	Type	Description
`text`	`string`	The text to animate. Each glyph becomes its own motion target.
`as`	`ElementType`	Element tag to render as. Use "h1" / "h2" / "p" for semantic headings or paragraphs.
`radius`	`number`	Pixel radius around each letter within which the cursor exerts pull.
`strength`	`number`	Maximum displacement (px) any single letter can reach at peak proximity.
`animateEntry`	`boolean`	When true, letters stagger in with a spring on mount before becoming magnetic.
`disableGlow`	`boolean`	When true, the soft white glow that fades in around letters near the cursor is removed (useful on light backgrounds).
`className`	`string`	Extra Tailwind classes on the wrapping element (font-size, weight, color, etc.).