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

Preview

License

MIT