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

• 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

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

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

Follow Installation, then choose an effect and review its motion-control props before using it with content.