✨ sparkle-ripple

Bring Material 3(You) Ripple Effect to your React projects!
Previously, it was named m3ripple.

Live Demo

Demo.mp4

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

Bun

bun install sparkle-ripple

Others

npm

npm i sparkle-ripple

pnpm

pnpm add sparkle-ripple

Yarn

yarn add sparkle-ripple

Use

Import <RippleContainer> component(by default, it's rendered as <div />) and set props.

Example

import { RippleContainer } from 'sparkle-ripple'; //import it
import 'sparkle-ripple/css' // import css

import styles from './some_css_file.module.css';

const YourComponent = () => {
  return (
    <RippleContainer
      as = 'div'
      isMaterial3 = {true}
      beforeRippleFn = {(event) =>{}}
      className = {styles.rippleContainer}
      rippleColor = "hsla(29,81%,84%,0.15)"
      sparklesColorRGB = "255 255 255"
      opacity_level1 = "0.4"
      opacity_level2 = "0.1"
      sparklesMaxCount = 2048
    >
      <div className={styles.children} />
    </RippleContainer>
  );
};

export default YourComponent;

Property	optional	explanation	default	type
as	yes	What element is RippleContainer rendered as.	"div"	ElementType
isMaterial3	yes	Whether to use ripple of Material 3.	true	boolean
beforeRippleFn	yes	A function to be executed when a click occurs and just before the ripple is displayed (used for example to display a button shadow).	()=>{}	(event: React.MouseEvent | React.TouchEvent) => void
className	yes	Since RippleContainer is rendered as the element which is selected by as property, this is the ClassName of that element.	""	string
children	yes	Child Elements of RippleContainer.	undefined	ReactNode
rippleColor	yes	Ripple Effect Colors. If transparency is not specified, the overlap will not be visible when multiple clicks are made.	"#ffffff35"	string
sparklesColorRGB	yes	Specify sparkle color as space-separated RGB. Transparency cannot be specified.	"255 255 255"	string
opacity_level1	yes	Transparency just before the sparkle disappears. *The transparency when initially displayed is calculated by the current progress of the Ripple Effect.	"0.2"	string
opacity_level2	yes	Transparency just before Sparkles disappear.Set after opacity_level1.	"0.1"	string
sparklesMaxCount	yes	Total amount of dots representing sparkle.	2048	number
Other Properties	yes	You can set other properties to add to the rendered element. e.g., href attribute of the RippleContainer whose rendered as <a></a> element.	-	-