# Grain Gradient
URL: https://remocn.dev/docs/shaders/components/shader-grain-gradient

Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend

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

## Installation

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

## Usage

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

const ShaderGrainGradientScene = () => (
  <ShaderGrainGradient speed={1} intensity={0.2} noise={0.15} />
);

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

## Presets

Ready-made looks, each a standalone registry item that pulls in `shader-grain-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-grain-gradient-sunrise`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/sunrise) — Grainy wave of coral and gold rising over a plum night. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-sunrise`
- [`shader-grain-gradient-nebula`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/nebula) — Magenta and cyan glow blooming from the corners of deep space. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-nebula`
- [`shader-grain-gradient-orb`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/orb) — Large grainy sphere in periwinkle, violet and pink. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-orb`
- [`shader-grain-gradient-horizon`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/horizon) — Peach horizon band rolling between navy and pale sky. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-horizon`
- [`shader-grain-gradient-blush`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/blush) — Pastel pink and apricot blob morphing on warm off-white. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-blush`
- [`shader-grain-gradient-tide`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/tide) — Teal ripple ring pulsing out of a dark sea-green core. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-tide`
- [`shader-grain-gradient-arcade`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/arcade) — Retro grainy dots in orange, yellow and green on black. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-arcade`
- [`shader-grain-gradient-dune`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/dune) — Sandy grain wave in tan, caramel and rust. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-dune`
- [`shader-grain-gradient-ultraviolet`](https://remocn.dev/docs/shaders/components/shader-grain-gradient/ultraviolet) — Electric magenta and blue blob morphing on ultraviolet black. Install: `npx shadcn@latest add @remocn/shader-grain-gradient-ultraviolet`

```tsx
import { ShaderGrainGradientSunrise } from "@/components/remocn/shader-grain-gradient-sunrise";

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

## Credits

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

## Use when
- A gradient backdrop needs analog texture — the grain reads as film/print rather than flat digital.
- The scene tone is premium and editorial and you want subtle motion that does not distract.
- You want the gradient softened; raise `softness`/`noise` for an even quieter field.

## Don't use when
- You need crisp, clean color with no texture — use `shader-mesh-gradient`.
- Foreground content is tiny text — heavy grain can reduce contrast; lower `intensity`/`noise` or pick a solid `backdrop`.
- You want structured geometry — use `shader-dot-orbit` or `shader-voronoi`.