Morph — Effects

Water Morph

A liquid wave content-swap effect. Click triggers an expanding radial wave from the pointer position while the old content dissolves and the new content emerges. Works on any element.

Mode Toggle

Click to morph between two labeled states. The wave originates from your pointer.

<button class="vd-morph" data-vd-morph>
  <span class="vd-morph-content vd-morph-current">
    <i class="ph ph-sun"></i> Light Mode
  </span>
  <span class="vd-morph-content vd-morph-next">
    <i class="ph ph-moon"></i> Dark Mode
  </span>
</button>

Theme Preview Card

Morph works on any container. This card-sized element swaps its entire surface.

Light ThemeClean and brightDark ThemeEasy on the eyes

<div class="vd-morph theme-card" data-vd-morph>
  <span class="vd-morph-content vd-morph-current">
    <i class="ph ph-sun"></i>
    <span>Light Theme</span>
  </span>
  <span class="vd-morph-content vd-morph-next">
    <i class="ph ph-moon-stars"></i>
    <span>Dark Theme</span>
  </span>
</div>

Status Badge Morph

Click any badge to cycle. Each state overrides --vd-morph-wave-color for a matching wave.

Online Away Low Medium Passing Running

<!-- Override --vd-morph-wave-color per status -->
<span class="vd-morph vd-morph-sm badge-online" data-vd-morph>
  <span class="vd-morph-content vd-morph-current">
    <i class="ph ph-wifi-high"></i> Online
  </span>
  <span class="vd-morph-content vd-morph-next">
    <i class="ph ph-coffee"></i> Away
  </span>
</span>

<!-- CSS: .badge-online { --vd-morph-wave-color: var(--vd-color-success); } -->

Caption Reveal

Morph text-heavy content with .vd-morph-lg for a slower, dramatic effect.

Mountain SunriseClick to reveal detailsMountain SunriseGolden light spills across alpine ridges at 5,200m elevation. Shot at f/8, 1/250s during the September equinox.

<!-- .vd-morph-lg slows the wave for dramatic reveals -->
<div class="vd-morph vd-morph-lg caption-card" data-vd-morph>
  <span class="vd-morph-content vd-morph-current">
    <span>Mountain Sunrise</span>
    <span>Click to reveal details</span>
  </span>
  <span class="vd-morph-content vd-morph-next">
    <span>Mountain Sunrise</span>
    <span>Golden light spills across alpine ridges...</span>
  </span>
</div>

API Reference

Wiring

import { ref } from 'vue';
import { useMorph } from "@vanduo-oss/vd3";
import { useMorphBadges } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useMorph(root);        // auto wave/shine + current⇄next swap
useMorphBadges(root);  // manual multi-state badge cycling

CSS Classes

Class	Description	Type
`.vd-morph`	Enable water morph on an element	Base
`.vd-morph-sm`	Shorter, snappier morph (0.5s)	Modifier
`.vd-morph-lg`	Slower, more dramatic morph (1s)	Modifier
`.vd-morph-wave`	Radial wave layer (auto-created by JS if absent)	Internal
`.vd-morph-shine`	Light-sweep layer (auto-created by JS if absent)	Internal
`.vd-morph-content`	Content wrapper — required on both states	Structure
`.vd-morph-current`	Currently visible content layer	State
`.vd-morph-next`	Hidden content layer revealed on morph	State

CSS Custom Properties

Variable	Default	Description
`--vd-morph-duration`	0.75s	Total animation duration
`--vd-morph-easing`	cubic-bezier(0.2, 0.8, 0.35, 1)	Wave expansion timing
`--vd-morph-wave-color`	var(--vd-color-primary)	Wave gradient base colour (override per-element)
`--vd-morph-blur-peak`	11px	Maximum blur at wave peak

Composable API

Symbol	Description
`useMorph(root)`	Composable — wires every auto-morph element inside the root ref (wave/shine layers, current⇄next content swap). Call once in setup().
`useMorphBadges(root)`	Composable — cycles [data-vd-morph="manual"][data-morph-states] badges through their states/classes/icons.

Accessibility

Wave and shine layers use aria-hidden="true" and carry no semantic content
Animation fully respects prefers-reduced-motion: reduce — content swaps instantly with no wave
Non-button morph elements should include role and tabindex for keyboard access
The component works with Enter and Space keys on natively focusable elements