Mercury screenshot

Mercury

Author Avatar Theme by Omicrxn
Updated: 16 Jul 2025
14 Stars

UI animation library for Svelte

Overview

Mercury is an innovative animation library specifically designed for Svelte, aimed at enriching modern applications with powerful motion without the complications often associated with animation solutions. Unlike many existing libraries that either limit functionality or disrupt the fundamental principles of Svelte, Mercury was crafted to fill this void, providing a seamless experience for developers who want to implement expressive animations.

This library stands out by focusing on layout-aware and fine-grained animations that feel native to Svelte’s ecosystem. With a strong emphasis on predictability, flexibility, and performance, Mercury allows developers to create intricate animations and transitions while keeping the simplicity of Svelte intact. It offers a unique approach that embraces Svelte’s strengths, making advanced animations easily accessible.

Features

  • Attachment-based Control: Declare animations using Svelte attachments for direct DOM manipulation without needing extra components or wrappers.
  • Shared Layout Transitions: Easily animate elements across layouts using layoutIds, allowing for smooth interactions and transitions between different states.
  • Presence Animations: Full support for component mount/unmount animations, enabling developers to create engaging visual cues when components enter or leave the DOM.
  • Minimal Friction: A declarative and composable API allows for scaling from simple transitions to complex user flows while minimizing boilerplate code.
  • Engine-Agnostic Compatibility: Mercury integrates seamlessly with various animation engines, such as AnimeJS, Motion, or GSAP, letting developers leverage their favorite tools alongside Mercury.
  • Predictable Behavior: Built on solid motion values and layout projections, ensuring that animations behave consistently across different scenarios.
  • Performant Design: Mercury is lightweight and optimized, contributing to a responsive user interface without compromising performance.
  • Svelte-Native Approach: Embraces Svelte’s reactive features and transitions, avoiding unnecessary abstractions while harnessing the framework’s inherent strengths.