Components
Magnetic
Component that creates a magnetic effect, attracting elements toward the cursor.
Magnetic
The Magnetic component creates a magnetic effect, attracting elements toward the cursor. It's perfect for creating interactive buttons and elements that respond to cursor proximity with smooth, physics-based animations.
Usage
<template>
<MMagnetic>
<UButton color="primary">Magnetic Button</UButton>
</MMagnetic>
</template>
Props
intensity
number
Magnetic intensity/strength.
range
number
Activation range in pixels.
actionArea
string
Area that triggers the effect ('self', 'parent', 'global').
springOptions
object
Spring physics options.
Examples
Basic Magnetic
Interactive Experience
Move your cursor around to feel the magnetic attraction effect on these interactive elements.
Lightning Fast
Experience blazing fast performance with our optimized solutions.
Beautiful Effects
Create stunning interfaces with our collection of animated components.
Easy Integration
Simple to implement with clean, well-documented code.
<template>
<MMagnetic>
<UButton color="secondary">Basic Magnetic</UButton>
</MMagnetic>
</template>
With Custom Intensity
<template>
<MMagnetic :intensity="1.2" :range="150">
<UButton color="tertiary">High Intensity</UButton>
</MMagnetic>
</template>
With Parent Action Area
<template>
<MMagnetic action-area="parent">
<UButton color="primary">Parent Area</UButton>
</MMagnetic>
</template>
With Custom Spring Options
<template>
<MMagnetic :spring-options="{ stiffness: 50, damping: 5, mass: 0.5 }">
<UButton color="primary" variant="outline">Custom Spring</UButton>
</MMagnetic>
</template>