Concentric Waves

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

Installation

npm install @reactbytes/concentric-waves

Usage

import { ConcentricWaves } from "@reactbytes/concentric-waves";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | layerCount | number | 16 | Number of concentric ring layers. | | ringSpacing | number | 45 | Distance between each main ring. | | baseRadiusStart | number | 40 | Starting radius of the innermost ring. | | pulseSpeedMultiplier | number | 1 | Multiplier for how fast the rings pulse. | | spinDurationMs | number | 2500 | How long it takes for the gradient to complete a 360 rotation (in ms). | | minOpacity | number | 0.4 | Minimum opacity for the main rings during their pulse. | | maxOpacity | number | 0.9 | Maximum opacity for the main rings during their pulse. | | minThickness | number | 4 | Thickness of the innermost main ring. | | maxThickness | number | 16 | Thickness of the outermost main ring. | | mainColor1 | color | #5ddcff | Start color for the main thick rings gradient. | | mainColor2 | color | #3c67e3 | Middle color for the main thick rings gradient. | | mainColor3 | color | #4e00c2 | End color for the main thick rings gradient. | | midColor1 | color | #f3f4f6 | Start color for the intermediate thin rings gradient. | | midColor2 | color | #9ca3af | Middle color for the intermediate thin rings gradient. | | midColor3 | color | #374151 | End color for the intermediate thin rings gradient. | | bgColor | color | #05080f | Background color of the canvas. |

Presets

This component includes the following design presets:

• Default Cyan-Purple (default)
• Sunset Glow (sunset)
• Digital Matrix (matrix)
• Minimalist Grayscale (minimalist)

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