# Introduction
URL: https://remocn.dev/docs/shaders/getting-started/introduction

WebGL shader backdrops wrapped for Remotion and driven per-frame for deterministic renders

## How it works

Each component wraps a shader from [paper-design/shaders](https://github.com/paper-design/shaders) and adapts it to the way Remotion renders video: headless, frame by frame, the same output on every pass.

## Installation

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

```tsx title="scene.tsx"
import { AbsoluteFill } from "remotion";
import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";

export const Scene = () => (
  <AbsoluteFill>
    <ShaderMeshGradient speed={1} />
    <AbsoluteFill>{/* your content on top */}</AbsoluteFill>
  </AbsoluteFill>
);
```

> **Why a dedicated wrapper**
>
> A shader runs on a wall-clock timer, while Remotion renders frame N in isolation, often out of order and across parallel workers. Each component freezes the shader with `speed={0}` and drives its `frame` uniform from `useCurrentFrame()`, so scrubbing, looping and multi-pass renders all stay deterministic. It also holds the first paint with `delayRender()` until WebGL is ready, and fills the whole composition so there are no black margins.

## All shaders

Defaults are deliberately muted. Pick your own palette when the shader should lead.