Svelte Magnet Action

A reusable magnetic action for Svelte 5

• 🚀 Svelte 5 – Built with runes
• 🟦 Types – Type definitions included for a superior developer experience
• ⚡ High Performance – Singleton event listener for smooth performance
• 🎮 GPU Accelerated – Animations run via requestAnimationFrame and translate3d
• 📐 Edge Sensing – Optional calculation based on element boundaries instead of the center point

Installation

npm i -D svelte-magnet-action

Usage

Add the action to any html element in your Svelte application:

<script>
    import { magnet } from 'svelte-magnet-action';
</script>

<button use:magnet>
    Hover near me
</button>

<div use:magnet={{ mode: 'repel', strength: 0.8, edgeMode: true }}>
    I will move away from your cursor
</div>

Using Svelte 5 Attachments

For Svelte 5 projects, you can use the modern {@attach} syntax. This approach is more natively integrated into the Svelte 5 reactivity system.

<script>
    import { attachMagnet } from 'svelte-magnet-action';
    
    let power = $state(0.8);
</script>

<button {@attach attachMagnet({ strength: power, edgeMode: true })}>
	Attachment
</button>

Options

| Property | Type | Default | Description | |:-----------------|:-----------------------|:------------|:---------------------------------------------------------------------------------------------------| | distance | number | 100 | The radius (in pixels) where the mouse triggers the effect. | | strength | number | 0.4 | Intensity of the movement. Higher = further displacement. | | mode | 'attract' \| 'repel' | 'attract' | Interaction type. 'attract' pulls toward the mouse, 'repel' pushes away. | | smoothness | number | 0.15 | Interpolation factor (0 to 1). Lower values are smoother/slower, higher values are snappier. | | edgeMode | boolean | false | If true, distance is calculated to the nearest edge. Recommended for wide or large elements. | | minWidth | number | 0 | Minimum viewport width (in pixels), useful for mobile. |

Preview

License

MIT