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.

| Prop | Type | Default | Description | | --- | --- | --- | --- | | blur | number | 6 | Softness of the liquid edges. | | contrast | number | 18 | How strongly nearby shapes connect. | | fill | string | #fff | Color of the liquid surface. | | filterPadding | number | 24 | Extra room around the effect to avoid clipped edges. |

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.

| Prop | Type | Default | Description | | --- | --- | --- | --- | | effect | 'morph' \| 'move' | 'morph' | Chooses between direct movement and a following/trailing effect. | | x | number | 0 | Horizontal offset in pixels. | | y | number | 0 | Vertical offset in pixels. | | scale | number | 1 | Item scale. | | transition | 'snappy' \| 'smooth' \| 'bouncy' \| object | 'smooth' | Motion preset or custom transition. | | delay | number | 0 | Transition delay in milliseconds. | | radius | number \| [number, number, number, number] | inferred | Overrides the item corner radius. | | morph | MorphTuning | — | Fine-tunes the morph effect. | | move | MoveTuning | — | Fine-tunes the move effect. | | dissolve | boolean \| number \| DissolveOptions | false | Adds a dissolve-style transition. |

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