Gradient Blinds
Customize Gradient Blinds
Angle0°
Noise0.30
Blind Count12
Blind Min Width50px
Spotlight Radius0.50
Spotlight Softness1.00
Spotlight Opacity1.00
Mouse Dampening0.15
Distort Amount0.00
Props
| Property | Type | Default | Description |
|---|---|---|---|
| gradientColors | string[] | ["#FF9FFC", "#5227FF"] | Array of gradient colors (minimum 2 colors) |
| angle | number | 0 | Angle of gradient blinds in degrees (0-360) |
| noise | number | 0.3 | Noise intensity for texture effect (0-1) |
| blindCount | number | 12 | Number of gradient blinds (1-50) |
| blindMinWidth | number | 50 | Minimum width of each blind in pixels (10-200) |
| spotlightRadius | number | 0.5 | Radius of spotlight effect (0-2) |
| spotlightSoftness | number | 1 | Softness of spotlight edges (0.1-5) |
| spotlightOpacity | number | 1 | Opacity of spotlight effect (0-2) |
| mouseDampening | number | 0.15 | Mouse interaction dampening factor (0-1) |
| distortAmount | number | 0 | Distortion amount for visual effects (0-5) |
| shineDirection | string | left | Direction of shine effect - 'left' or 'right' |
| mixBlendMode | string | lighten | CSS blend mode for mixing effects |
| mirrorGradient | boolean | | Enable or disable gradient mirroring |
| paused | boolean | | Pause or resume animations |
| className | string | custom-gradient-blinds | Additional CSS class names for styling |
| width | string | 100% | Width of the gradient blinds container |
| height | string | 600px | Height of the gradient blinds container |
| quality | string | high | Rendering quality - 'low', 'medium', or 'high' |
Dependencies
oglreact
Created with ❤️ by Cybershoora