https://github.com/lostisworld/astro-magneto
Let an element follow the mouse cursor with a graceful and smooth motion.
https://github.com/lostisworld/astro-magneto
astro astro-component intersectionobserver magnet movement transform3d typescript
Last synced: 6 months ago
JSON representation
Let an element follow the mouse cursor with a graceful and smooth motion.
- Host: GitHub
- URL: https://github.com/lostisworld/astro-magneto
- Owner: LoStisWorld
- Created: 2023-02-25T00:00:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T20:30:59.000Z (over 2 years ago)
- Last Synced: 2025-02-03T02:17:17.256Z (9 months ago)
- Topics: astro, astro-component, intersectionobserver, magnet, movement, transform3d, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-magneto
- Size: 21.5 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro Magneto
Let an element follow the mouse cursor with a graceful and smooth motion.
### [Live Demo](https://stackblitz.com/edit/withastro-astro-hjhuav?file=src%2Fpages%2Findex.astro)
## 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 | 0s | This specifies the duration to wait before the element goes back to the base position |
## How to use
```html
---
import { Magneto } from 'astro-magneto';
---
Click Me
Click Me
Click Me
```
> 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.