Magnetic

A magnetic effect that smoothly attracts elements to the mouse cursor based on configurable physics and proximity ranges.

Installation

npx raya-ui@latest add magnetic

File Structure

your-project

components

magnetic

Magnetic.vue

API Reference

Props

intensity

number

0.6

Strength of the magnetic attraction. A value between 0 and 1 is recommended.

range

number

100

Pixel radius around the element where the magnetic effect becomes active.

actionArea

enum

"self"

Defines the hover trigger area boundary. Accepts 'self' (default), 'parent' (container), or 'global' (always active).

Vue component created & ported by the author of Raya UI.

Original concept by Motion Primitives

Settings

Example Variant

Intensity0.30

Range (px)150

Action Area

source-code.vue

<script setup lang="ts">
import { Magnetic } from '@/components/ui/magnetic'
import { Button } from '@/components/ui/button'
import { Plus } from 'lucide-vue-next'
</script>

<template>
  <Magnetic
    :intensity="0.3"
    :range="150"
  >
    <Button variant="outline" class="rounded-full h-16 w-16 p-0 flex items-center justify-center border-2">
      <Plus class="w-6 h-6" />
    </Button>
  </Magnetic>
</template>