# Mesh Gradient
URL: https://remocn.dev/docs/shaders/components/shader-mesh-gradient

WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders

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

## Installation

```bash
npx shadcn@latest add @remocn/shader-mesh-gradient
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";

const ShaderMeshGradientScene = () => (
  <ShaderMeshGradient speed={1} distortion={0.6} swirl={0.1} />
);

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

## Presets

Ready-made looks, each a standalone registry item that pulls in `shader-mesh-gradient` as a dependency. Install one and drop it in like the base shader. Props you pass override the preset, and `speed` scales the preset's own pace instead of replacing it.

- [`shader-mesh-gradient-dusk`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/dusk) — Violet dusk with coral and peach light drifting through deep indigo. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-dusk`
- [`shader-mesh-gradient-lagoon`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/lagoon) — Bright aqua and teal shallows with a deep-blue undertow. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-lagoon`
- [`shader-mesh-gradient-peach`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/peach) — Warm peach and cream glow with a whisper of film grain. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-peach`
- [`shader-mesh-gradient-aurora`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/aurora) — Cyan and violet ribbons swirling out of a near-black sky. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-aurora`
- [`shader-mesh-gradient-lavender`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/lavender) — Soft lilac and pink haze with grain-softened edges. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-lavender`
- [`shader-mesh-gradient-ember`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/ember) — Molten orange and amber pooling in dark oxblood. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-ember`
- [`shader-mesh-gradient-mint`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/mint) — Airy mint and sky-blue pastel wash around a deeper green core. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-mint`
- [`shader-mesh-gradient-synthwave`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/synthwave) — Night-purple field lit by a warm coral sunset glow. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-synthwave`
- [`shader-mesh-gradient-ink`](https://remocn.dev/docs/shaders/components/shader-mesh-gradient/ink) — Monochrome ink folds in charcoal and silver with grain. Install: `npx shadcn@latest add @remocn/shader-mesh-gradient-ink`

```tsx
import { ShaderMeshGradientDusk } from "@/components/remocn/shader-mesh-gradient-dusk";

export const Background = () => <ShaderMeshGradientDusk />;
```

## Credits

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

## Use when
- You need a quality, production-grade gradient backdrop.
- A hero or title scene wants slow, living color motion behind foreground text without competing for attention.
- The brand palette is soft/dark and you want the gradient to lead only when you override `colors`.

## Don't use when
- You want a structured, geometric background — use `shader-dot-orbit` or `shader-voronoi`.
- The shader must animate on a wall clock rather than the timeline — these wrappers are frame-driven by design; that is what keeps renders deterministic.
- You need a static, single-frame image — a solid `backdrop` fill is lighter.