Magnetic Scatter Text

npx rareui add MagneticScatterText

Usage

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

export default function MyComponent() {
  return (
    <MagneticScatterText text="Your Text" className="text-6xl" />
  );
}

Examples

With Trigger Control

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

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        Toggle Animation
      </button>
      
      <MagneticScatterText 
        text="Click to animate" 
        trigger={show}
        className="text-6xl text-foreground"
      />
    </div>
  );
}

Custom Styling

<MagneticScatterText 
  text="Magnetic" 
  className="text-9xl font-bold text-blue-500"
/>

Features

• Magnetic Spring Animation: Letters gather from scattered positions with spring physics
• Interactive Hover: Slight scatter effect when hovering over the text
• Deterministic Random: Consistent scatter pattern based on letter position
• Smooth Transitions: Spring-based animations for natural movement
• Fully Customizable: Control trigger state and styling

Props