Interactive Ripple

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/ripple

Usage

import { Ripple } from "@reactbytes/ripple";

export default function Example() {
  return (
    <Ripple />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | zoom | number | 1.5 | Zoom level of the ripple waves. Lower value results in visually larger wave patterns. | | speed | number | 0.25 | Speed multiplier of the wave movement. | | threadsFreq | number | 28 | Frequency / density of the interactive line threads in the wave mesh. | | brightness | number | 1.8 | Brightness / luminance multiplier of the shader output color. | | mouseInfluence | number | 0.8 | Distortion and wave-bending force relative to mouse movement. | | clickToSpike | boolean | true | Enables temporary high-intensity ripple shockwaves when clicking on the canvas. | | colorBase | color | #2673ff | Base color used to tint the shader wave color. |

Presets

This component includes the following design presets:

• Deep Cosmic (default)
• Cyber Neon (cyberpunk)
• Emerald Silk (emerald)
• Solar Flare (solar)
• Liquid Platinum (monochrome)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Interactive Ripple.