liquid-vuey

liquid-vuey

Fluid, connected UI effects for Vue 3.

Use liquid-vuey to give menus, buttons, toggles, draggable controls, and other interface elements a playful liquid appearance while keeping their content clickable and accessible.

Installation

npm install liquid-vuey

Requires Vue 3.3 or newer.

Quick start

Wrap a group of LiquidItem components in Liquid, then move each item with the x, y, and scale props.

<script setup lang="ts">
import { ref } from 'vue'
import { Liquid, LiquidItem } from 'liquid-vuey'

const open = ref(false)
</script>

<template>
  <button @click="open = !open">
    Toggle menu
  </button>

  <Liquid fill="#7c3aed" class="liquid-menu">
    <LiquidItem :x="open ? -56 : 0" :y="open ? -32 : 0" transition="bouncy">
      <button class="menu-item" aria-label="Previous">←</button>
    </LiquidItem>

    <LiquidItem :y="open ? -68 : 0" :delay="40" transition="bouncy">
      <button class="menu-item" aria-label="Add">+</button>
    </LiquidItem>
  </Liquid>
</template>

<style scoped>
.liquid-menu {
  width: 180px;
  height: 180px;
}

.menu-item {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: transparent;
  cursor: pointer;
}
</style>

Following externally positioned elements

Use effect="move" when an item is positioned by drag logic, animation code, or your own CSS. The liquid shape follows the element and creates a trailing droplet as it moves.

<Liquid class="slider-track" fill="#2563eb">
  <LiquidItem
    effect="move"
    :move="{ springiness: 0.5, wobble: 0.5, stretch: 0.36, trail: 0.575 }"
  >
    <button
      class="slider-thumb"
      :style="{ transform: `translateX(${position}px)` }"
    />
  </LiquidItem>
</Liquid>

Components

Liquid

The container that controls the shared appearance of its liquid items.

The container accepts normal HTML attributes such as class, style, and id.

LiquidItem

Wraps one element that participates in the liquid effect. It must be placed inside Liquid.

Exports

import Liquid, {
  LiquidItem,
  presets,
  type DissolveOptions,
  type MorphTuning,
  type MoveTuning,
  type Transition,
} from 'liquid-vuey'

Both of these component styles are supported:

<LiquidItem>...</LiquidItem>
<Liquid.Item>...</Liquid.Item>

Tips

• Give the Liquid container enough width and height for the items' full range of movement.
• Use transparent item backgrounds when you want the shared liquid color to show through.
• Put text, icons, event handlers, focus states, and ARIA attributes on the slotted element as usual.
• Motion is reduced automatically when the visitor prefers reduced motion.

License

MIT