m3ripple-vue

✨ m3ripple for vue

Bring Material 3(You) Ripple Effect to your Vue projects!

Features

• ✨ Ripple Effect with sparkle easily realized on the web
• 😍 Well-tuned behavior with no faltering
• 🎨 Highly customizable in terms of ripple color, number of sparkles, clarity, etc.
• ⚡ High speed drawing for Sparkles by canvas
• ✅ Ripple effect in Material 2 is also supported

Getting Started

Install

# npm
npm install m3ripple-vue

# pnpm
pnpm add m3ripple-vue

# yarn
yarn add m3ripple-vue

# bun
bun add m3ripple-vue

Usage

Import the <Ripple /> component and place it inside any element you want to add the effect to.

IMPORTANT: The parent element (<button>, <div>, etc.) must have its CSS position set to relative, absolute, fixed, or sticky.

<script setup lang="ts">
import { Ripple } from "m3ripple-vue";
</script>

<template>
  <button class="my-button">
    Click Me!
    <Ripple />
  </button>
</template>

<style>
.my-button {
  /* This is required for the ripple to position correctly */
  position: relative;

  /* Your other styles */
  border-radius: 20px;
  padding: 12px 24px;
  border: none;
  background-color: #3f51b5;
  color: white;
  cursor: pointer;
}
</style>

Examples

Basic Button

<button class="demo-button">
  Click me!
  <Ripple />
</button>

<style>
.demo-button {
  position: relative;
  border-radius: 20px;
}
</style>

Interactive Card (div)

<div class="demo-card">
  <h3>Interactive Card</h3>
  <p>Click anywhere on this card.</p>
  <Ripple />
</div>

<style>
.demo-card {
  position: relative;
  border-radius: 16px;
  background: hsla(0, 0%, 100%, 0.06);
  cursor: pointer;
}
</style>

Style Variants (Props)

<button class="demo-button">
  M2 Ripple
  <Ripple :isMaterial3="false" />
</button>

<button class="demo-button">
  Purple Ripple
  <Ripple rippleColor="#8e44ad80" />
</button>

<button class="demo-button">
  Blue Sparkles
  <Ripple sparklesColorRGB="52, 152, 219" />
</button>

Props