Getting Started

Mercury is an animation library for Svelte. For further information read About Mercury.

Getting Started

To get started with Mercury, you can install it from npm using your favorite package manager.

Installation

install @omicrxn/mercury

Animate an element

Mercury leverages Svelte Actions for animations. Here’s a basic example:

<script lang="ts">
  import { mercury } from "@omicrxn/mercury";
  </script>
  <p use:mercury={{ animate: { scale: 2 } }}>
    Hello, Mercury!
  </p>

Explanation:

• use:mercury: This applies Mercury’s animation logic to the element.
• animate: { scale: 2 }: The element scales to twice its size during the animation.

Full Example: Interactive Card

To see a more practical use case, here’s an example of animating a card with a hover effect:

<script lang="ts">
  import { mercury } from "@omicrxn/mercury";
  </script>
  <div
    use:mercury={{
      animate: { scale: 1.1 },
      whileHover: { rotate: 15 },
    }}
    style="width: 200px; height: 100px; background-color: lightblue;"
  >
    Hover over me!
  </div>