Docs
Floating waves

Floating waves

A floating waves component.

Welcome to BuouUI

Installation

Copy and paste the Floating Dock code into your project.

API Reference

First Dock

Props

PropTypeDescription
waveSpeedXnumberHorizontal speed of the wave movement. Controls the speed at which the water waves move along the X-axis.
waveSpeedYnumberVertical speed of the wave movement. Controls the speed at which the water waves move along the Y-axis.
waveAmpXnumberAmplitude of the wave movement on the X-axis. Determines how wide the water waves are.
waveAmpYnumberAmplitude of the wave movement on the Y-axis. Determines how tall the water waves are.
backgroundColorstringBackground color of the water ripple effect container. Can be set to transparent for a clean effect over images.
lineColorstringColor of the water ripple effect lines. Typically a semi-transparent white to mimic the look of water.
styleobjectCustom styles for the ripple effect container, allowing further control over its appearance (e.g., background images).

Usage

export default function App() {
  return (
    <div className="relative w-full h-[800px]">
      <WaterRippleEffect
        waveSpeedX={0.02}
        waveSpeedY={0.01}
        waveAmpX={50}
        waveAmpY={30}
        backgroundColor="transparent"
        lineColor="rgba(255, 255, 255, 0.3)" 
        style={{
          backgroundImage: "url(https://img.buoucoding.com/image/17.jpg)",
          backgroundSize: "cover",
        }}
      />
    </div>
  )
}
Confetti ButtonHacker