Gestures

Mercury introduces gesture-based animations for interactive elements, such as hover effects, drag interactions, and taps.

<div
  use:mercury={{
    hover: { scale: 1.1 },
    tap: { scale: 0.9 },
    drag: true
  }}
>
  Gesture-Based Animation
</div>

Supported Gestures

Hover

Animations triggered when the user hovers over the element.

whileHover: { scale: 1.1, rotate: 10 }

Tap

Animations triggered on a tap or click interaction.

whileTap: { scale: 0.9 }

Drag

Enables drag interactions for the element. Optionally, you can define drag constraints.

whileDrag: { scale: 1.1, rotate: 10 }

Focus

whileFocus: { scale: 1.1, rotate: 10 }