npm-ripple-wave-bg

A lightweight, customizable ripple background component for React applications. Create beautiful interactive water ripple effects dynamically.

📦 Installation

Install the package via NPM:

npm install npm-ripple-wave-bg

🛠 Usage

Import and use the RippleBackground component in your React project:

Basic Example

import React from 'react'
import RippleBackground from 'npm-ripple-wave-bg'

const App = () => {
  return (
    <div
      style={{
        position: 'relative',
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1e1e2f',
        overflow: 'hidden',
      }}
    >
      {/* The ripple background */}
      <RippleBackground />
      <div
        style={{
          textAlign: 'center',
          color: 'white',
          fontFamily: 'Arial, sans-serif',
          background: 'rgba(0, 0, 0, 0.3)',
          padding: '20px 40px',
          borderRadius: '12px',
          boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.3)',
          backdropFilter: 'blur(10px)',
        }}
      >
        <h1>Welcome to the Ripple Effect</h1>
        <p>Experience smooth and interactive ripples in the background.</p>
      </div>
    </div>
  )
}

export default App

🎨 Customization

The RippleBackground component supports several props for customization:

| Prop Name | Type | Default Value | Description | | ----------------- | ------ | ---------------------------- | -------------------------------- | | numWaves | number | 4 | Number of background wave layers | | rippleSize | number | 1.5 | Controls the size of each ripple | | backgroundColor | string | 'rgba(0, 0, 0, 0.1)' | Sets the background color | | waveColor | string | 'rgba(136, 172, 224, 0.3)' | Color of the waves | | zIndex | number | 0 | Z-index of the ripple background | | waveSpeed | number | 800 | Speed of the wave animations |

📌 Why Use This Package?

• Minimalistic: No external CSS, easy to integrate
• Highly customizable: Modify colors, speeds, sizes, and more
• Smooth performance: Optimized for smooth animations
• Lightweight: No heavy dependencies

🛠 Development & Contribution

If you’d like to contribute:

1. Clone the repo:

   git clone https://github.com/your-username/npm-ripple-wave-bg.git

2. Navigate to the project:

   cd npm-ripple-wave-bg

3. Install dependencies:

   npm install

4. Run the project locally:

   npm start

📄 License

ISC License © 2025 Amina Khan

⭐ Support & Feedback

If you like this package, give it a ⭐ on GitHub!
For issues, report them here.

For any inquiries or feedback, please reach out to:

Amina Khan
[email protected] | GitHub

Enjoy smooth and interactive ripples! 🌊🚀