composable · mobile feedback

useTuxRipple

Material-style tap-feedback ripple on a target element. Captured from the Material 3 absorption as an opt-in affordance for [data-platform="android"] surfaces; not enabled globally on TuxButton or other interactive components. Use sparingly — TUX motion restraint applies.

Honors prefers-reduced-motion — skips the ripple animation entirely when the user has reduce-motion set. The target element must have position: relative + overflow: hidden for the ripple to be clipped correctly.

usage

Bind to a ref

(See live demos below)

<script setup>
const btn = ref<HTMLElement | null>(null);
useTuxRipple(btn, { color: "rgba(255, 255, 255, 0.4)" });
</script>

<template>
  <button ref="btn">Tap me</button>
</template>

<style scoped>
button {
  position: relative;
  overflow: hidden;
}
</style>

brand-primary button

Maroon button with white ripple

White (45% opacity) ripple over a maroon background. Click / tap the button to see the feedback.

tonal card

Maroon ripple over paper

For lighter surfaces (cards, list rows), use a maroon-tinted ripple at low opacity. Custom duration = 800ms for a softer feel.

Click this card

A maroon-tinted ripple emanates from the click origin.