Star on GitHub0

Magnetic Button

Magnetic Button Component

The MagneticButton component is an interactive UI element that creates a magnetic effect, pulling the cursor towards the button when it is within a certain range. This component is highly customizable and provides a unique user experience.

Features

  • Magnetic Effect: Attracts the cursor when it is within a defined range.
  • Customizable Intensity: Adjust the magnetic pull strength.
  • Flexible Interaction Area: Choose between self, parent, or global interaction areas.
  • Smooth Animations: Uses spring-based animations for smooth transitions.
  • Lightweight: Minimal dependencies and optimized for performance.
Loading component preview...

Source Code

Props

PropertyTypeDefaultDescription
children
React.ReactNode
required
The content to be rendered inside the magnetic button.
magneticIntensity
number
0.6
The intensity of the magnetic pull effect.
magneticRange
number
100
The range within which the magnetic effect is active.
interactionArea
'self' | 'parent'
'self'
Defines the area of interaction for the magnetic effect.
springConfig
SpringOptions
{ stiffness: 30, damping: 6, mass: 0.6 }
Configuration for the spring animation.
customClassName
string
undefined
Additional class names for custom styling.

Dependencies

This component uses the following third-party dependencies: