Magnetic Text

Installation

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

How It Works

This component uses Framer Motion's useMotionValue and useSpring hooks to track the cursor's position across the parent container.

We split the string into individual characters and render them as separate motion.span elements. By applying a slight modulus variance (index % 3) * 50 to the stiffness parameter of each character's spring physics, we ensure they pull towards the mouse at slightly different speeds. This results in a dynamic, organic elastic stretching effect rather than a rigid block movement.

Usage Guide

1. Import the Component

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

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

2. Implementation Example

Render the component and customize its behavior by passing props:

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

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