pointer

Magnetic

A wrapper that applies spring physics to elements, making them stick to the cursor on hover.

gsap

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-lg border border-border bg-background px-3 text-xs font-medium tracking-wide text-foreground uppercase shadow-sm"
	>
		Magnetic Button
	</button>
</Magnetic>

Props

Magnetic

Prop	Type	Default
`duration`	`number`	`1`
`ease`	`string`	`"elastic.out(1, 0.3)"`
`class`	`string`	`—`