Magnetic

"use client"

import { Magnetic } from "@animate-ui/react/primitives/effects/magnetic"

import { Button } from "@/components/ui/button"

export default function MagneticDemo({
  onlyOnHover = false,
  strength = 0.5,
  range = 120,
}: {
  onlyOnHover?: boolean
  strength?: number
  range?: number
}) {
  return (
    <Magnetic strength={strength} range={range} onlyOnHover={onlyOnHover}>
      <Button size="lg">Come closer</Button>
    </Magnetic>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { Magnetic } from '@animate-ui/react/primitives/effects/magnetic';

export function CallToAction() {
  return (
    <Magnetic strength={0.4} range={160}>
      <button>Come closer</button>
    </Magnetic>
  );
}

AnimationCopy Anchor Link

• Within range pixels of its center, the element moves toward the pointer: the closer, the stronger the pull (strength). The distance is measured from where the element currently is, pull included. It springs back when the pointer leaves the range.
• The pull follows the pointer on a light, bouncy spring (stiffness 100, damping 10, mass 0.5), so it's interruptible and never jumps. It moves with x / y, a hardware-accelerated transform.
• The pointer is only tracked while the element is on screen. With onlyOnHover, only while it's hovered.
• Off on touch screens (disableOnTouch), where there is no pointer to follow.
• <AnimateUIProvider tempo> paces the default spring.
• Under reduced motion, the element stays in place.

API ReferenceCopy Anchor Link

MagneticCopy Anchor Link