Skip to main content

​
Overview

MagneticScatterText splits your text into individual characters and animates each one independently using Framer Motion spring physics. On hover, letters scatter in deterministic directions based on their index, then snap back elastically — creating a magnetic pull effect.

​
Installation

npx rareui@latest add magnetic-scatter-text
Requires framer-motion as a peer dependency.
npm install framer-motion

​
Usage

import { MagneticScatterText } from "@/components/rareui/Text Animation/MagneticScatterText";

export default function Hero() {
  return (
    <MagneticScatterText
      text="Hover Me"
      className="text-6xl font-bold"
    />
  );
}

​
Props

​
text
string
required
The text content to animate. Each character is split and animated independently.
​
trigger
boolean
default:"true"
Controls the animation state. When true the text assembles into view; when false it scatters away.
​
className
string
Additional Tailwind or CSS classes applied to the container div. Use this to control font size, color, weight, and spacing.

​
Examples

​
Basic hover scatter

<MagneticScatterText
  text="Magnetic"
  className="text-8xl font-black tracking-tighter"
/>

​
Controlled trigger animation

"use client";
import { useState } from "react";
import { MagneticScatterText } from "@/components/rareui/Text Animation/MagneticScatterText";

export default function ControlledDemo() {
  const [show, setShow] = useState(false);

  return (
    <div className="flex flex-col items-center gap-6">
      <button
        onClick={() => setShow(!show)}
        className="px-4 py-2 bg-black text-white rounded-md text-sm"
      >
        Toggle
      </button>
      <MagneticScatterText
        text="Click the button"
        trigger={show}
        className="text-4xl"
      />
    </div>
  );
}

​
Custom styled headline

<MagneticScatterText
  text="RareUI"
  className="text-9xl font-black text-blue-500 tracking-tight"
/>

​
Features

Magnetic Scattering

Characters fly apart in deterministic directions on hover, then spring back to their positions.

Deterministic Randomness

Scatter offsets are derived from character index using a seeded algorithm — consistent across renders.

Trigger Control

Programmatically show or hide the text via the trigger prop, useful for scroll-driven reveals.

Spring Physics

Entry and scatter animations use Framer Motion spring physics with configurable damping, stiffness, and mass.

Build docs developers (and LLMs) love

Get started for freeTalk to us