Magnetic Animation

MAX

A magnetic animation for elements

Demo

Magnetic subtle

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates

All animations

No subscriptions

No hidden fees

$19.99

Payment once and get lifetime access

Usage Example

<MagneticAnimation
  className="w-40 h-40 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center"
  strength={0.5}
>
    <span className="text-white font-bold">Subtle</span>
</MagneticAnimation>
 
<MagneticAnimation
  className="w-40 h-40 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center"
  strength={1}
>
    <span className="text-white font-bold">Medium</span>
</MagneticAnimation>
 
<MagneticAnimation
  className="w-40 h-40 bg-gradient-to-br from-amber-500 to-red-500 rounded-xl flex items-center justify-center"
  strength={2}
>
    <span className="text-white font-bold">Strong</span>
</MagneticAnimation>

Properties

The MagneticAnimation component accepts the following props:

Property	Type	Default	Description
`children`	`ReactNode`	-	The content to animate
`active`	`boolean`	`true`	Whether the animation is active
`className`	`string`	`""`	Additional CSS classes
`strength`	`number`	`1`	The strength of the animation
`radius`	`number`	`100`	The radius of the animation
`smooth`	`number`	`0.2`	The smoothness of the animation

Usage Examples

Magnetic subtle

Magnetic medium

Magnetic strong

Documentation

Animations