Magnetic Scatter Text

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

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

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

"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>
  );
}

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