# Grainient

> Blend three colors into a warped, animated gradient with controllable film grain.

Source: https://www.honestui.com/docs/shaders/grainient

<ComponentPreview name="grainient-demo" />

## Overview [#overview]

Grainient creates a soft three-color field with independent controls for warping, rotation, tone, and grain. Use it when a product moment needs an organic background that still feels designed and controllable.

## Installation [#installation]

<CommandBlock commands="[&#x22;honestui&#x22;]" />

## Usage [#usage]

```tsx
import { Grainient } from "honestui/shaders"

<div className="h-80">
  <Grainient
    className="size-full"
    color1="#ffb257"
    color2="#d8d3c5"
    color3="#335c67"
    grainAmount={0.08}
  />
</div>
```

## Accessibility [#accessibility]

Use Grainient as decoration and keep readable content in a separate foreground layer. The component pauses while it is offscreen, while the document is hidden, and when the user enables reduced motion. Use `paused` for application-specific control, and provide a static background when WebGL is unavailable.

## API Reference [#api-reference]


  ### `color1`

type: `string` · default: `&#x22;#FF9FFC&#x22;`

First gradient color.

  ### `color2`

type: `string` · default: `&#x22;#5227FF&#x22;`

Second gradient color.

  ### `color3`

type: `string` · default: `&#x22;#B497CF&#x22;`

Third gradient color.

  ### `paused`

type: `boolean` · default: `false`

Renders a static frame instead of animating.

  ### `timeSpeed`

type: `number` · default: `0.25`

Overall animation speed.

  ### `warpStrength`

type: `number` · default: `1`

Strength of the gradient deformation.

  ### `warpFrequency`

type: `number` · default: `5`

Frequency of the deformation.

  ### `warpSpeed`

type: `number` · default: `2`

Movement speed of the deformation.

  ### `warpAmplitude`

type: `number` · default: `50`

Scale of the deformation.

  ### `blendAngle`

type: `number` · default: `0`

Direction of the color blend.

  ### `blendSoftness`

type: `number` · default: `0.05`

Softness between color regions.

  ### `grainAmount`

type: `number` · default: `0.1`

Strength of the grain overlay.

  ### `grainScale`

type: `number` · default: `2`

Size of the grain texture.

  ### `grainAnimated`

type: `boolean` · default: `false`

Moves the grain over time.

  ### `contrast`

type: `number` · default: `1.5`

Output contrast.

  ### `gamma`

type: `number` · default: `1`

Output gamma.

  ### `saturation`

type: `number` · default: `1`

Output saturation.

  ### `zoom`

type: `number` · default: `0.9`

Scale of the rendered field.

  ### `className`

type: `string`

Class for sizing and positioning the container.