āØ 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
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
`
Examples
$3
`
vue
`
$3
`
vue Interactive Card Click anywhere on this card.
`
$3
`
vue
`
Props
| Property | optional | explanation | default | type | | 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` |