heroatomix/ui
Documentation
Components
Magnetic-wrapper

Magnetic Wrapper

A magnetic effect wrapper component that creates an elastic attraction-like interaction for child elements.

Mihir (OPM)

Written by Mihir (OPM)

hero

The MagneticWrapper component adds an engaging interactive effect to child elements, simulating a magnetic attraction-like motion that follows the user's cursor.

Installation

Examples

Props

PropTypeDescriptionDefault
childrenReactElementThe child element that will have the magnetic interaction applied.-
animationDurationnumberDuration of the magnetic effect animation in seconds.1
elasticitynumberElasticity factor controlling the bounciness of the magnetic effect.0.3

Basic Usage

import MagneticWrapper from "@/components/magnetic-wrapper";
 
export default function Example() {
  return (
    <MagneticWrapper animationDuration={1.2} elasticity={0.5}>
      <button className="btn">Hover Me!</button>
    </MagneticWrapper>
  );
}