astro-magneto
v1.0.0
Published
Let an element follow the mouse cursor with a graceful and smooth motion.
Downloads
8
Maintainers
Readme
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.