Motion Core

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
npx @motion-core/cli add magnetic
pnpm dlx @motion-core/cli add magnetic
pnpm dlx @motion-core/cli add magnetic
bunx @motion-core/cli add magnetic
bunx @motion-core/cli add magnetic
yarn dlx @motion-core/cli add magnetic
yarn dlx @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

Props

1.000s
<script lang="ts">
	import { Magnetic } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof Magnetic>>;

	let { duration = 1, ease = "elastic.out(1, 0.3)" }: Props = $props();
</script>

<Magnetic {duration} {ease}>
	<button
		class="h-8 gap-1.5 rounded-sm bg-background-muted px-3 text-xs font-medium tracking-wide text-foreground uppercase card"
	>
		Magnetic Button
	</button>
</Magnetic>

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

	type Props = Partial<ComponentProps<typeof Magnetic>>;

	let { duration = 1, ease = "elastic.out(1, 0.3)" }: Props = $props();
</script>

<Magnetic {duration} {ease}>
	<button
		class="h-8 gap-1.5 rounded-sm bg-background-muted px-3 text-xs font-medium tracking-wide text-foreground uppercase card"
	>
		Magnetic Button
	</button>
</Magnetic>

Props

Magnetic

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