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

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.|-|-|