Command Palette

Search for a command to run...

Docs
Ripple

Ripple

An animated ripple effect typically used behind elements to emphasize them.

Zenix Waves

Installation

Usage

import { Ripple } from "zenix-ui/ripple";
<div className="relative h-[500px] w-full overflow-hidden">
  <Ripple />
</div>

Props

PropTypeDefaultDescription
mainCircleSizenumber210The size of the main circle in pixels
mainCircleOpacitynumber0.24The opacity of the main circle
numCirclesnumber8The number of ripple circles to render