⨠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
$3 ``bashnpm npm install m3ripple-vue
pnpm pnpm add m3ripple-vue
yarn yarn add m3ripple-vue
bun bun add m3ripple-vue
`
$3 Import the
component and place it inside any element you want to add the effect to.IMPORTANT : The parent element (
, , etc.) must have its CSS position
set to relative
, absolute
, fixed
, or sticky
.
`
vue Click Me!
`
Examples
$3
`
vue Click me!
`
$3
`
vue Interactive Card Click anywhere on this card.
`
$3
`
vue M2 Ripple Purple Ripple
Blue Sparkles
`
Props
| Property | optional | explanation | default | type | | ------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------- | | isMaterial3 | yes | Use Material 3 ripple style (with sparkles). Set to false for M2 style. | true | boolean | | beforeRippleFn | yes | Function executed just before the ripple animation starts. Useful for coordinated effects (e.g., press shadow). | ()=>{} | (event: MouseEvent \| TouchEvent) => void | | rippleColor | yes | Color of the ripple circle. Use rgba or hsla with transparency to see overlaps on multiple clicks. | "#ffffff35" | string | | sparklesColorRGB | yes | Color of the sparkles (M3 only) as space-separated RGB (e.g., "255 0 128"). Does not support transparency. | "255 255 255" | string | | opacity_level1 | yes | Transparency level 1 for sparkles before they disappear. The initial opacity is calculated based on the ripple's current progress. | "0.2" | string | | opacity_level2 | yes | Transparency level 2 for sparkles just before they disappear. Applied after opacity_level1. | "0.1" | string | | sparklesMaxCount | yes | Maximum number of sparkle dots to render. Higher values create denser sparkle effects but may impact performance. | 2048 | number` |