Magnetic Repulsion Text

Installation

npx kinetic-ui-cli@latest add magnetic-repulsion-text

How It Works

The MagneticRepulsionText component breaks a string down into individual letter <span>s. It uses a single container-level onMouseMove event to track the global cursor coordinates using framer-motion's useMotionValue (to prevent massive React re-renders). Each individual letter calculates its own Pythagorean distance to the cursor on every frame. If the cursor breaches the threshold radius, an inverse translation force is applied, pushing the letter away. As soon as the cursor leaves, a high-tension spring snaps the letter violently back into place.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { MagneticRepulsionText } from "@/components/creative/magnetic-repulsion-text";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MagneticRepulsionText } from "@/components/creative/magnetic-repulsion-text";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MagneticRepulsionText
        text="example"
        threshold{10}
      />
    </div>
  );
}