Caustics
NewPro
Moving underwater light patterns, computed from a simulated water surface in a WebGL shader. The pointer stirs the water.
Customize
#ff784f
1
1
1
0.5
When to use it
- Pool, spa, sailing or travel websites
- Underwater levels and menus in games
- Calm hero sections with a glass or water theme
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- WebGL canvas
- Reduced motion
- Respected
- Lines of code
- 307
Installation
Caustics is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy caustics.tsx into components/ui and run npm install motion.
Usage
import { Caustics } from "@/components/ui/caustics";
<section className="relative h-[600px]">
<Caustics color="#ff784f" scale={1} intensity={1} />
</section>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Light color as a hex value. |
| background | string | "#0c0a09" | Color of the deep water behind the light, as a hex value. |
| speed | number | 1 | Wave speed multiplier. |
| scale | number | 1 | Size of the pattern. Larger values make broader cells of light. |
| intensity | number | 1 | Brightness of the light, from 0 to 2. |
| dispersion | number | 0.5 | How far the light splits into colored fringes, from 0 to 1. |
| interactive | boolean | true | Let the pointer stir the water. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the wrapper. It fills its nearest positioned parent. |
Dependencies: motion