127 Components
Waterfall
BackgroundsPhysics-driven cascading waterfall background rendered on HTML5 Canvas 2D with 240+ layered vertical hydro streaks, gravity-accelerated splash droplets, and a pulsing volumetric mist cloud at the plunge basin.
Cascading Fluid Physics
Waterfall
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/waterfall.json"
Props
TypeScript props supported by <Waterfall />.
| Prop | Type | Default | Description |
|---|---|---|---|
| flow | number | 1.0 | Velocity multiplier for falling water streaks and splash kinetics. |
| mistAmount | number | 0.75 | Opacity and density of the pulsing volumetric mist cloud at the plunge pool line (0 to 1). |
| color | string | "#38BDF8" | Primary hex color tint for the water streaks, subsurface glow, and mist. |
| curtainWidth | number | 0.75 | Horizontal span of the waterfall curtain relative to the container width (0.3 to 1.0). |
| splashIntensity | number | 1.0 | Spawn rate multiplier for upward-bouncing splash droplets at the plunge line. |
| children | React.ReactNode | — | Optional foreground UI rendered above the waterfall canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Three depth-sorted hydro streak layers with independent speed, thickness, and additive screen luminance.
- Ballistic splash droplets launched upward from the plunge line with real-time gravity decay.
- Pulsing volumetric mist puffs and shimmering water surface ripples along the basin floor.
Keyboard & Accessibility
- Marks the decorative Canvas 2D element and vignette overlays with `aria-hidden='true'`.
- High-contrast glassmorphic HUD controls remain keyboard accessible when no custom children are passed.
- Automatically scales to devicePixelRatio (capped at 2x) via ResizeObserver without layout thrashing.