Astro Magneto

Let an element follow the mouse cursor with a graceful and smooth motion.

Instalation

using npm

npm install astro-magneto

using pnpm

pnpm add astro-magneto

Possible Props

If Visual Studio Code is your preferred IDE, simply press CRTL+SPACE / CMD+SPACE to reveal the valid properties.

• class [sting]
• options [object]
• transition [object]

| Property | Object | Type | Default | Desctription | | ------------------ | :-------: | :---------------: | :-----: | ---------------------------------------------------- | | class | - | string | - | Add classes to the element | | triggerArea | options | number | 100 | Element follows the mouse cursor in this range (around the element) | | movementRatio | options | 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8 | 0.5 | The triggerArea size directly affects the element's movement area, determining the space in which the element can be repositioned. | | rootMargin | options | string | 0px | IntersectionObserver rootMargin option | | threshold | options | number | 0.5 | IntersectionObserver threshold option | | duration | transition | string | 250ms | Element speed to base position | | timing | transition | string | ease | Transition timing function | | delay | transition | string | ease | Transition timing function |

How to use

---
import { Magneto } from 'astro-magneto';
---

<div>

  <!-- basic -->
  <Magneto>
    <button type="button">Click Me</button>
  </Magneto>

  <!-- using class with tailwind -->
  <Magneto class="text-red-500">
    <button type="button">Click Me</button>
  </Magneto>

  <!-- using options -->
  <Magneto 
    options={{ 
      triggerArea: 200,
      movementRatio: 0.8,
      rootMargin: '100px 0px',
      threshold: 1
    }}
  >
    <button type="button">Click Me</button>
  </Magneto>

  <!-- using transition -->
  <Magneto 
    transition={{ 
      duration: '500ms',
      timing: 'linear',
      delay: '5s'
    }}
  >

</div>

Keep in mind that Magneto use the mousemove event, if the element is in the given (rootMargin, threashold) range. Additionally, the mousemove event will be automatically disabled once the element moves out of the viewport.