||

Gradient Blinds

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

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. Set paused when motion should stop, 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.
pausedbooleanfalseStops time-based rendering updates.
dprnumber–Overrides the canvas device-pixel ratio.
classNamestring–Class for sizing and positioning the container.