← DOCS
effects

Magnet

Magnetic effect that pulls elements toward cursor on hover.

npx chaos add 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""