Magnet
A magnetic hover effect that attracts elements to the cursor
Configuring your account...
Please wait while we prepare everything for you
Usage
import Magnet from './Magnet'
<Magnet padding={50} disabled={false} magnetStrength={50}>
<p>Star React Bits on GitHub!</p>
</Magnet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
padding | number | 100 | Magnetic field padding in pixels |
disabled | boolean | false | Whether to disable the magnetic effect |
magnetStrength | number | 2 | Strength of the magnetic pull |
activeTransition | string | 'transform 0.3s ease-out' | CSS transition when active |
inactiveTransition | string | 'transform 0.5s ease-in-out' | CSS transition when inactive |
wrapperClassName | string | '' | CSS class for wrapper element |
innerClassName | string | '' | CSS class for inner element |