# Gradient Blinds

> Render a pointer-lit gradient through adjustable bands of color and distortion.

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

<ComponentPreview name="blinds-demo" />

## Overview [#overview]

Gradient Blinds turns a multi-stop gradient into directional bands with noise, spotlight response, and optional warping. It works best as a decorative background for a focused hero, cover, or feature panel.

## Installation [#installation]

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

## Usage [#usage]

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

<div className="h-80 bg-black">
  <GradientBlinds
    className="size-full"
    gradientColors={["#ffb86b", "#f9f4e8", "#4f7cff"]}
    angle={18}
    blindCount={12}
    mixBlendMode="normal"
  />
</div>
```

## Accessibility [#accessibility]

Keep the effect decorative and do not rely on the moving spotlight to communicate state. The component renders a static frame when the user enables reduced motion; use `paused` for application-specific control. Provide a static background when WebGL is unavailable, and verify foreground text against every part of the gradient.

## API Reference [#api-reference]


  ### `gradientColors`

type: `string[]` · default: `[&#x22;#FF9FFC&#x22;, &#x22;#5227FF&#x22;]`

Hex color stops, up to eight.

  ### `angle`

type: `number` · default: `0`

Band direction in degrees.

  ### `blindCount`

type: `number` · default: `16`

Requested number of gradient bands.

  ### `blindMinWidth`

type: `number` · default: `60`

Minimum band width in pixels.

  ### `noise`

type: `number` · default: `0.3`

Amount of surface noise.

  ### `distortAmount`

type: `number` · default: `0`

Strength of band warping.

  ### `mirrorGradient`

type: `boolean` · default: `false`

Mirrors the gradient across adjacent bands.

  ### `spotlightRadius`

type: `number` · default: `0.5`

Radius of the pointer spotlight.

  ### `spotlightSoftness`

type: `number` · default: `1`

Falloff softness around the spotlight.

  ### `spotlightOpacity`

type: `number` · default: `1`

Spotlight intensity.

  ### `mouseDampening`

type: `number` · default: `0.15`

How gradually the spotlight follows the pointer.

  ### `shineDirection`

type: `&#x22;left&#x22; | &#x22;right&#x22;` · default: `&#x22;left&#x22;`

Direction of the band highlight.

  ### `mixBlendMode`

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

CSS blend mode applied to the shader container.

  ### `paused`

type: `boolean` · default: `false`

Renders a static frame instead of animating.

  ### `dpr`

type: `number`

Overrides the canvas device-pixel ratio.

  ### `className`

type: `string`

Class for sizing and positioning the container.