# Shaders

> Add optional WebGL backgrounds and media effects through a dedicated package entry point.

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

Honest UI shaders render animated or pointer-responsive effects with WebGL. Import them from `honestui/shaders` and treat them as progressive enhancement around normal HTML content.

## Choose an effect [#choose-an-effect]

* **Gradient Blinds** divides a multicolor gradient into directional bands with optional pointer lighting and distortion.
* **Grainient** blends three colors into an organic field with controllable warp, tone, and grain.
* **Light Rays** creates a directional wash that can originate from an edge or corner.

Use one effect to support a specific product or brand moment. A CSS color, gradient, image, or no effect at all should remain an acceptable fallback.

## Keep essential content outside WebGL [#keep-essential-content-outside-webgl]

Render headings, instructions, controls, and status in normal HTML above or beside the shader. The effect must not be the only source of text, state, contrast, or an action.

Test foreground contrast across the full animation rather than at one frame. Provide a static presentation for reduced motion and when WebGL is unavailable.

## Account for rendering cost [#account-for-rendering-cost]

Each shader creates a canvas and a render loop while animation is active. Avoid mounting several large shaders on one view, pause effects that are not visible, and measure representative devices before using a full-viewport effect.

## Get started [#get-started]

Follow [Installation](/docs/shaders/installation), then choose an effect and review its motion-control props before using it with content.