Magnet — magnet

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { Magnet } from '@oalacea/chaosui/effects/magnet';

<Magnet>
  <button>Hover me</button>
</Magnet>
<Magnet padding={150} magnetStrength={3}>
  <div>Stronger pull</div>
</Magnet>

PROPS

PropTypeDefault

childrenChild elements to apply magnet effect

ReactNode-

paddingPadding around element to trigger effect (pixels)

number100

disabledDisable the magnet effect

booleanfalse

magnetStrengthStrength of attraction (higher = less movement)

number2

activeTransitionTransition when active/attracted

string"transform 0.3s ease-out"

inactiveTransitionTransition when inactive/released

string"transform 0.5s ease-in-out"

wrapperClassNameClass for wrapper div

string""

innerClassNameClass for inner div

string""