rain-ripple

A dependency-free, canvas-based realistic rain animation with water ripples, splashes, wind drift and occasional lightning — perfect as a page background or inside a card/hero section.

Install

npm install rain-ripple

Usage

Full-page background (simplest)

import { RainRipple } from "rain-ripple";

// No target = attaches a fixed, full-viewport canvas behind your content
new RainRipple();

Inside a specific element, with text on top

The canvas is automatically absolutely-positioned to fill its container, sits behind whatever else is already in there, and ignores clicks — so your copy stays visible and interactive on top of it. You don't need to set position: relative on the container yourself; the library does it for you if it's still static.

<section id="hero" style="height: 480px;">
  <h1>Built for stormy nights</h1>
  <button>Get started</button>
</section>

import { RainRipple } from "rain-ripple";

new RainRipple("#hero");

With options

import { RainRipple } from "rain-ripple";

const rain = new RainRipple("#hero", {
  rainCount: 220,      // number of drops on screen
  wind: -1.4,           // horizontal drift (negative = slants left)
  groundTop: 0.65,      // horizon line, 0–1 fraction of height
  rainColor: [185, 215, 240],
  rippleColor: [175, 215, 240],
  background: true,     // paint the built-in dark sky/ground gradient
  lightning: true,       // occasional lightning flashes
  autoStart: true,
});

// Pause / resume
rain.stop();
rain.start();

// Change settings live
rain.setOptions({ rainCount: 400 });

// Clean up (removes listeners and the canvas it created)
rain.destroy();

CommonJS

const { RainRipple } = require("rain-ripple");
new RainRipple();

Directly on a <canvas>

<canvas id="rain" style="width: 100%; height: 100%;"></canvas>

new RainRipple(document.getElementById("rain"));

Intensity presets

rainCount (and to a lesser extent maxParticles) is what controls how heavy the rain feels. A few starting points for a background effect:

// Light, relaxed drizzle — good behind readable text
new RainRipple("#hero", { rainCount: 90, maxParticles: 300 });

// Default, moderate rain
new RainRipple("#hero"); // rainCount: 150

// Heavy storm
new RainRipple("#hero", { rainCount: 320, maxParticles: 700, lightning: true });

Options

| Option | Type | Default | Description | | -------------- | ------------------------ | ----------------------- | -------------------------------------------------- | | rainCount | number | 150 | Drops on screen at once | | wind | number | -1.0 | Horizontal drift | | groundTop | number (0–1) | 0.62 | Horizon line as a fraction of canvas height | | maxRipples | number | 220 | Cap on concurrent ripples | | maxParticles | number | 600 | Cap on concurrent splash/droplet particles | | rainColor | [r, g, b] | [185, 215, 240] | Raindrop color | | rippleColor | [r, g, b] | [175, 215, 240] | Ripple color | | background | boolean | true | Paint the built-in dark sky/ground gradient | | lightning | boolean | true | Occasional lightning flashes | | autoStart | boolean | true | Start animating immediately | | zIndex | number | -1 | z-index used only when auto-attached to <body> |

API

• new RainRipple(target?, options?) — target is a CSS selector, an HTMLElement to fill, an existing <canvas>, or omitted to attach a full-viewport background canvas to <body>.
• .start() — start/resume the animation.
• .stop() — pause without tearing anything down.
• .resize() — recalculate canvas size (call if you resize its container manually without a window resize event).
• .setOptions(partial) — merge new options at runtime; re-seeds drops if rainCount changes.
• .destroy() — stop, remove listeners, and remove the canvas if this instance created one.

License

MIT