vue-bits/src/content/Animations/Magnet/Magnet.vue

<template>
  <div ref="magnetRef" :class="wrapperClassName" :style="{ position: 'relative', display: 'inline-block' }"
    v-bind="$attrs">
    <div :class="innerClassName" :style="{
      transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
      transition: transitionStyle,
      willChange: 'transform',
    }">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'

interface Props {
  padding?: number
  disabled?: boolean
  magnetStrength?: number
  activeTransition?: string
  inactiveTransition?: string
  wrapperClassName?: string
  innerClassName?: string
}

const props = withDefaults(defineProps<Props>(), {
  padding: 100,
  disabled: false,
  magnetStrength: 2,
  activeTransition: 'transform 0.3s ease-out',
  inactiveTransition: 'transform 0.5s ease-in-out',
  wrapperClassName: '',
  innerClassName: ''
})

defineOptions({
  inheritAttrs: false
})

const magnetRef = ref<HTMLDivElement | null>(null)
const isActive = ref(false)
const position = ref({ x: 0, y: 0 })

const transitionStyle = computed(() =>
  isActive.value ? props.activeTransition : props.inactiveTransition
)

const handleMouseMove = (e: MouseEvent) => {
  if (!magnetRef.value || props.disabled) return

  const { left, top, width, height } = magnetRef.value.getBoundingClientRect()
  const centerX = left + width / 2
  const centerY = top + height / 2

  const distX = Math.abs(centerX - e.clientX)
  const distY = Math.abs(centerY - e.clientY)

  if (distX < width / 2 + props.padding && distY < height / 2 + props.padding) {
    isActive.value = true
    const offsetX = (e.clientX - centerX) / props.magnetStrength
    const offsetY = (e.clientY - centerY) / props.magnetStrength
    position.value = { x: offsetX, y: offsetY }
  } else {
    isActive.value = false
    position.value = { x: 0, y: 0 }
  }
}

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)
})

onUnmounted(() => {
  window.removeEventListener('mousemove', handleMouseMove)
})

watch(() => props.disabled, (newDisabled) => {
  if (newDisabled) {
    position.value = { x: 0, y: 0 }
    isActive.value = false
  }
})
</script>