Magnetic

<script setup lang="ts">
import { Magnetic } from '@animate-ui/vue/primitives/effects/magnetic'
import { Button } from '@/components/ui/button'

withDefaults(
  defineProps<{
    onlyOnHover?: boolean | string
    strength?: number | string
    range?: number | string
  }>(),
  { onlyOnHover: false, strength: 0.5, range: 120 },
)
</script>

<template>
  <Magnetic
    :key="`${onlyOnHover}-${strength}-${range}`"
    :strength="Number(strength)"
    :range="Number(range)"
    :only-on-hover="onlyOnHover === true || onlyOnHover === 'true'"
  >
    <Button size="lg">
      Come closer
    </Button>
  </Magnetic>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { Magnetic } from '@animate-ui/vue/primitives/effects/magnetic';
</script>

<template>
  <Magnetic :strength="0.4" :range="160">
    <button>Come closer</button>
  </Magnetic>
</template>

AnimationCopy Anchor Link

• Within range pixels of its center, the element moves toward the pointer: the closer, the stronger the pull (strength). The distance is measured from where the element currently is, pull included. It springs back when the pointer leaves the range.
• The pull follows the pointer on a light, bouncy spring (stiffness 100, damping 10, mass 0.5), so it's interruptible and never jumps. It moves with x / y, a hardware-accelerated transform.
• The pointer is only tracked while the element is on screen. With only-on-hover, only while it's hovered.
• Off on touch screens (disable-on-touch), where there is no pointer to follow.
• <AnimateUIProvider :tempo> paces the default spring.
• Under reduced motion, the element stays in place.

API ReferenceCopy Anchor Link

MagneticCopy Anchor Link