Gradient Stripes
ProRaycast-inspired WebGL stripes with a mouse-tracked spotlight and fine film grain.
backgroundgradientblindsdepthfull bleed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
gradientColors | string[] | - | Hex gradient stops (2–8). Defaults to a chili-led palette. |
angle | number | 0 | Blind rotation in degrees. |
noise | number | 0 | Film grain strength. |
blindCount | number | 18 | Target number of louvers across the width. |
blindMinWidth | number | 60 | Minimum louver width in CSS pixels on small screens. |
mouseDampening | number | 0.15 | Mouse follow lag in seconds. 0 snaps instantly. |
mirrorGradient | boolean | false | Mirror the gradient across the center. |
spotlightRadius | number | 0.45 | Mouse spotlight radius (normalized). |
spotlightSoftness | number | 1.2 | Spotlight falloff softness. |
spotlightOpacity | number | 0.65 | Spotlight intensity. |
distortAmount | number | 0 | Wave warp amount along the louvers. |
shineDirection | "left" | "right" | "left" | Direction of the louver shine stripe. |
restX | number | 0.5 | Idle spotlight X as a 0–1 fraction of canvas width. |
restY | number | 0.5 | Idle spotlight Y as a 0–1 fraction of canvas height (0 = top). |
mixBlendMode | CSSProperties['mixBlendMode'] | - | Optional CSS mix-blend-mode on the WebGL layer (e.g. lighten). |
paused | boolean | false | Force-pause the render loop. |
children | React.ReactNode | - | Optional overlay content above the backdrop. |