Ripple

Material-style click ripples with zero JavaScript cost for the consumer. Drop vd-ripple on any element and the framework spawns a radial fill from the click point, animates it outward, and cleans up. Custom color and duration are first-class attributes.

Buttons & Cards
Click anywhere on this card 
<!-- Button with ripple -->
<button class="vd-btn vd-btn-primary vd-ripple">Click me</button>

<!-- Card with ripple on click -->
<div class="vd-card vd-card-glow vd-ripple" style="cursor:pointer; padding: 1.5rem;">
  Click anywhere on this card
</div>

<!-- Custom color via attribute -->
<button class="vd-btn vd-ripple" data-vd-ripple-color="#22c55e">
  Green Ripple
</button>

<!-- Centered ripple -->
<button class="vd-btn vd-btn-outline vd-ripple" data-vd-ripple-centered>
  Centered
</button>
Engine wiring
import { ref } from 'vue';
import { useRipple } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useRipple(root);   // wires every .vd-ripple inside root; cleanup on unmount
API Reference
Class / AttributeDescription
.vd-rippleAdds click-spawned ripple. Works on buttons, links, cards.
data-vd-rippleAttribute equivalent of `.vd-ripple`.
data-vd-ripple-colorOverride the ripple color (any CSS color value).
data-vd-ripple-durationOverride animation duration in ms (default 600).
data-vd-ripple-centeredForce the ripple to spawn at the element's center.
Accessibility
  • Ripples are purely decorative. The element's underlying click/keyboard semantics are unchanged.
  • The framework respects prefers-reduced-motion: reduce and skips the animation when set.
  • Ripples carry aria-hidden="true" so screen readers ignore them.