Petal Wave

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

Installation

npm install @reactbytes/petal-wave

Usage

import { PetalWave } from "@reactbytes/petal-wave";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | colorStart | color | #ef4444 | The base background/path color of the grid elements. | | colorEnd | color | #18181b | The staggered wave animation fill color. | | speed | number | 1 | Animation speed multiplier (GSAP timeScale). Controls loop speed. | | shape | select | petal | The geometry/shape preset used for path elements. | | staggerFrom | select | center | Where the wave ripple stagger originates. | | staggerAmount | number | 6 | The total staggered animation spread time in seconds. | | staggerEase | select | sine.in | The easing function used for distribute staggering. | | ease | select | expo | The transitioning ease used for individual element morphs. |

Presets

This component includes the following design presets:

• Crimson Ocean (crimson-ocean)
• Electric Lime (electric-lime)
• Sunset Horizon (sunset-horizon)
• Cyberpunk Glow (cyberpunk)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Libraries Used

• GSAP - Animation Engine

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