127 Components
Ocean Waves
BackgroundsMulti-layered rolling ocean waves rendered on Canvas 2D using multi-harmonic trochoidal wave equations, translucent subsurface ridge scattering, and shimmering crest foam highlights.
Trochoidal Harmonics
Ocean Waves
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/ocean-waves.json"
Props
TypeScript props supported by <OceanWaves />.
| Prop | Type | Default | Description |
|---|---|---|---|
| waveCount | number | 5 | Number of stacked parallax ocean wave layers (3 to 9). |
| amplitude | number | 28 | Peak vertical wave height in pixels. |
| frequency | number | 0.008 | Horizontal wave frequency in radians per pixel. |
| speed | number | 1.0 | Animation speed multiplier for wave propagation. |
| oceanColor | string | "#0284C7" | Base hex color used to compute subsurface crest and deep water gradients. |
| foam | boolean | true | Toggles shimmering white foam lines and peak sparkles along wave crests. |
| children | React.ReactNode | — | Optional foreground UI rendered above the ocean waves. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- 5+ stacked parallax wave layers computed via 3-harmonic sine and cosine superposition.
- Translucent subsurface turquoise ridge glow with depth-graded ocean color attenuation.
- Shimmering white crest foam lines and dynamic peak sparkles along breaking wave ridges.
Keyboard & Accessibility
- Marks decorative wave canvas with `aria-hidden='true'`.
- Maintains accessible contrast over dark abyssal gradients for hero typography and controls.
- Interactive swell and foam controls are keyboard accessible.