Getting Started

Seamlessly integrate Motion-powered animations into your Svelte projects using Mercury.

The following guide will walk you through the process of installing Mercury.

Installation

You can easily install Mercury with npm or your preferred package manager:

npm install @omicrxn/mercury

pnpm add @omicrxn/mercury

yarn add @omicrxn/mercury

bun add @omicrxn/mercury

nub add @omicrxn/mercury

aube add @omicrxn/mercury

Animating Elements

Mercury leverages Svelte Attachments to provide intuitive animation handling. Here’s a basic example demonstrating its usage:

<script lang="ts">
	import { mercury, type AnimationInstance } from '@omicrxn/mercury';
	let { animation = $bindable() }: { animation?: AnimationInstance } = $props();
</script>

<div class="flex flex-col gap-4 justify-center items-center w-full h-full">
	<div
		class="box"
		style="transform: scale(0.4);"
		{@attach mercury({
			animate: { scale: 1 },
			instance: (instance)=>{
			  animation = instance
			},
			transition: { ease: 'circInOut', duration: 1, autoplay: true }
		})}
	></div>
</div>