# Water
URL: https://remocn.dev/docs/shaders/components/shader-water

Caustic water-surface ripples with subtle refraction

- Install: `npx shadcn@latest add @remocn/shader-water`
- Vibe: premium
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-water
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderWater } from "@/components/remocn/shader-water";

const ShaderWaterScene = () => (
  <ShaderWater speed={1} waves={0.3} caustic={0.08} />
);

export const RemotionRoot = () => (
  <Composition
    id="ShaderWater"
    component={ShaderWaterScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Credits

Shader by [paper-design/shaders](https://github.com/paper-design/shaders).

## Use when
- A scene wants a calm, aquatic atmosphere with gentle refracted highlights.
- You need a cool, dark blue backdrop that moves slowly without pulling focus.
- The brief calls for depth or "flow" imagery (data lakes, streaming, calm).

## Don't use when
- The palette must be warm or vibrant — water reads cool by design; recolor via `colorHighlight`/`colorBack` or choose another shader.
- You want sharp geometric motion — use `shader-swirl` or `shader-dot-orbit`.
- Bright caustics would fight small text — lower `caustic`/`highlights` or use a solid `backdrop`.