Mercury — Motion-powered animations for Svelte

Motion-powered animations for Svelte. Attachments, presence, and layout — made the Svelte way.

Built on Motion

Every Motion feature, none of the wrappers.

Mercury works directly on your elements through Svelte attachments and transitions, so it fits into existing components without changing how you write them. Try the demos below.

Animate

Declare targets with an attachment. Springs, keyframes, and easings come from Motion.

API →Source

Gestures

Hover, tap, drag, and scroll — each with its own transition.

API →Source

Presence

Enter and exit animations built on Svelte transitions. No wrapper component.

API →Source

Layout

FLIP layout changes and shared elements that CSS alone can't animate.

API →Source

One attachment

State in, motion out.

Attachments re-run when their reactive dependencies change, so animate is naturally state-driven. Derive it from $state and Mercury animates on every change — with Motion's engine doing the work.

Get started All examples

<script>
  import { mercury } from '@omicrxn/mercury';
  let open = $state(false);
</script>

<button
  onclick={() => (open = !open)}
  {@attach mercury({
    animate: { rotate: open ? 180 : 0 },
    whileTap: { scale: 0.9 },
    transition: { type: 'spring', bounce: 0.4 }
  })}
>
  Flip
</button>