Motion Core

Magnetic

Magnetic adds a playful, interactive feel to UI elements by making them stick to and follow the cursor. It wraps any child component and applies a spring-physics based movement effect on hover.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add magnetic

Import the component

Import the component into your Svelte file: 
import { Magnetic } from "$lib/motion-core";
import { Magnetic } from "$lib/motion-core";

Usage

<script lang="ts">
	import { Magnetic } from "motion-core";
</script>

<Magnetic>
	<button
		class="h-8 gap-1.5 rounded-md border border-border bg-card px-3 text-xs font-medium tracking-wide text-foreground uppercase shadow-sm"
	>
		Magnetic Button
	</button>
</Magnetic>

Props

Magnetic

PropTypeDefault
duration
number 1
ease
string 'elastic.out(1, 0.3)'
class
string —