Magnetic Scatter Text
An interactive text animation that scatters on hover with magnetic spring effects.
Hover Me
Installation
pnpm dlx rareui add MagneticScatterText
Usage
1
Import the component
import { MagneticScatterText } from "@/components/rareui/Text Animation/MagneticScatterText";
2
Use in your application
export default function MyComponent() {
return (
<MagneticScatterText text="Your Text" className="text-6xl" />
);
}
Features
Text scatters in random directions on hover with physics-based movement.
Examples
Examples
1
Controlled Animation
"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 className="flex flex-col items-center gap-4">
<button
onClick={() => setShow(!show)}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium"
>
Toggle Animation
</button>
<MagneticScatterText
text="Click button"
trigger={show}
className="text-4xl text-foreground"
/>
</div>
);
}
2
Custom Styling
<MagneticScatterText
text="Magnetic"
className="text-8xl font-black text-blue-500 tracking-tighter"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text content to animate. |
trigger | boolean | true | Controls animation state (true = visible, false = hidden). |
className | string | - | Additional styles for the container. |