Skip to documentation content
|

Gradient Blinds

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

blinds-demo

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
npm install honestui

Usage

 
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

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
PropTypeDefaultDescription
gradientColorsstring[]["#FF9FFC", "#5227FF"]Hex color stops, up to eight.
anglenumber0Band direction in degrees.
blindCountnumber16Requested number of gradient bands.
blindMinWidthnumber60Minimum band width in pixels.
noisenumber0.3Amount of surface noise.
distortAmountnumber0Strength of band warping.
mirrorGradientbooleanfalseMirrors the gradient across adjacent bands.
spotlightRadiusnumber0.5Radius of the pointer spotlight.
spotlightSoftnessnumber1Falloff softness around the spotlight.
spotlightOpacitynumber1Spotlight intensity.
mouseDampeningnumber0.15How gradually the spotlight follows the pointer.
shineDirectionleft|right"left"Direction of the band highlight.
mixBlendModestring"lighten"CSS blend mode applied to the shader container.
pausedbooleanfalseRenders a static frame instead of animating.
dprnumber–Overrides the canvas device-pixel ratio.
classNamestring–Class for sizing and positioning the container.