How To Use

Getting Started

Install

Bun

bun install @m_three_ui/m3ripple

Others

npm i @m_three_ui/m3ripple

pnpm add @m_three_ui/m3ripple

yarn add @m_three_ui/m3ripple

Use

Import <RippleContainer> component(based on <div />) and set props.

Example

import { RippleContainer } from '@m_three_ui/m3ripple'; //import it
import styles from './some_css_file.module.css';

const YourComponent = () => {
  return (
    <RippleContainer
      isMaterial3={true} {/* optional, default: true */}
      className={styles.rippleContainer} {/* optional */}
      rippleColor="hsla(29,81%,84%,0.15)" {/* optional */}
      sparklesColorRGB="255 255 255" {/* optional */}
      opacity_level1="0.4" {/* optional */}
      opacity_level2="0.1" {/* optional */}
    >
      <div className={styles.children} /> {/* children here */}
    </RippleContainer>
  );
};

export default YourComponent;

FAQ

The Ripple Effect looks broken. The ripple’s width and height seem to affect the layout of the child elements inside RippleContainer, as if the ripple doesn’t have position: absolute. What’s going on?

This is a known issue. It occurs when the CSS provided by the library fails to apply correctly.

As a workaround, please assign a custom class via the className prop on RippleContainer, and apply the following CSS manually:

.rippleContainer {
  /* Workaround(m3ripple's css modules is not working) */
  overflow: hidden;
  position: relative;
  z-index: 0;

  & :global(.ripple) {
    position: absolute;
    border-radius: 100%;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  & :global(.sparkles_canvas) {
    position: absolute;
    user-select: none;
  }
}

This works only in environments where CSS is scoped using something like CSS Modules and supports :global().
If you’re not using such an environment, please use the following alternative instead.\

.rippleContainer {
  /* Workaround(m3ripple's css modules is not working) */
  overflow: hidden;
  position: relative;
  z-index: 0;

  & .ripple {
    position: absolute;
    border-radius: 100%;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  & .sparkles_canvas {
    position: absolute;
    user-select: none;
  }
}