127 Components
Underwater Caustics
BackgroundsShimmering underwater caustic light network powered by a real-time WebGL fragment shader with subtle chromatic dispersion, diagonal volumetric God-ray sunbeams, and buoyant rising bubbles.
Refracted Light Network
Underwater Caustics
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/underwater-caustics.json"
Props
TypeScript props supported by <UnderwaterCaustics />.
| Prop | Type | Default | Description |
|---|---|---|---|
| waterColor | string | "#0369A1" | Primary underwater hex color used for surface-to-floor light attenuation. |
| causticIntensity | number | 1.0 | Brightness multiplier for the refracted caustic network and sunbeams. |
| speed | number | 1.0 | Animation speed multiplier for caustic undulation and bubble ascent. |
| bubbleCount | number | 35 | Number of buoyant rising bubbles with horizontal sine wobble. |
| sunbeams | boolean | true | Toggles diagonal volumetric sunbeams radiating from the water surface. |
| children | React.ReactNode | — | Optional foreground content rendered above the underwater scene. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- 5-iteration domain-warped trigonometric GLSL caustic solver with RGB chromatic dispersion.
- Volumetric diagonal sunbeams attenuating smoothly with water depth.
- Buoyant rising bubbles on an overlay 2D canvas with horizontal sine oscillation and specular glints.
Keyboard & Accessibility
- Both WebGL and 2D bubble canvases are marked `aria-hidden='true'`.
- Interactive Lagoon, Cenote, and Abyssal presets are fully keyboard operable.
- Maintains strong contrast for foreground white text via abyssal depth vignettes.