Layered gradient blinds with spotlight and noise distortion.
Every prop is wired to the controls underneath. Move the pointer over the stage to steer the spotlight.
| Prop | Type | Default | Description |
|---|---|---|---|
gradientColors | string[] | ["#FF9FFC", "#5227FF"] | Array of hex colors (2 to 8) that make up the gradient. |
angle | number | 0 | Rotation of the gradient in degrees (0 = horizontal left to right). |
noise | number | 0.3 | Strength of per-pixel noise added to the final color (0 = clean). |
blindCount | number | 16 | Target number of vertical blinds. Acts as an upper bound when blindMinWidth is set. |
blindMinWidth | number | 60 | Minimum width in pixels of each blind. The blind count is reduced so no blind is narrower than this. |
mouseDampening | number | 0.15 | Easing time constant (seconds) for the spotlight to follow the cursor. 0 = immediate. |
mirrorGradient | boolean | false | Creates a mirrored ping-pong gradient progression instead of a linear wrap. |
spotlightRadius | number | 0.5 | Normalized spotlight radius relative to the shorter canvas dimension. |
spotlightSoftness | number | 1 | Falloff exponent for spotlight edge. Higher = sharper edge (values > 1 increase contrast). |
spotlightOpacity | number | 1 | Overall intensity multiplier for the spotlight highlight. |
distortAmount | number | 0 | Sin/cos warp intensity applied to UVs for subtle wavy distortion. |
shineDirection | 'left' | 'right' | 'left' | Flips the bright side of each blind; useful for composition with other elements. |
mixBlendMode | string | 'lighten' | CSS mix-blend-mode applied to the container (e.g. 'screen', 'overlay', 'multiply'). |
paused | boolean | false | If true, stops rendering updates (freezing the current frame). |
dpr | number | window.devicePixelRatio | Overrides device pixel ratio; lower for performance, higher for sharpness. |
lightMode | boolean | false | Renders the blinds as pigment on a white background and ignores mixBlendMode. |
Keyboard shortcuts and ARIA behavior.