# Caustics
URL: https://remocn.dev/docs/shaders/components/shader-caustics

A field of refracted light — the bright filaments light makes through a rippling surface

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

## Installation

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

## Usage

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

const ShaderCausticsScene = () => (
  <ShaderCaustics speed={1} scale={5.2} intensity={1} />
);

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

A custom WebGL shader written for the Remocn registry — frame-driven and
deterministic, with no wall-clock time, so every render is identical. Feed
`colors` a two-stop range for the water tone and lift `accentAmount` to tint
the brightest filaments with `accent`.

## Use when
- Water, light, or premium ambient backdrops where refracted-light filaments fit the mood.
- A calm, elegant scene wants motion without a strong directional pull.
- You want the light density to build toward one edge of the frame (denser toward the bottom by default).

## Don't use when
- You want structured cellular noise — use `shader-voronoi`.
- You want soft fog instead of filaments — use `shader-perlin-noise`.