Gradient Blinds
Animated gradient blinds with spotlight effects and mouse interaction.
Configuring your account...
Please wait while we prepare everything for you
Usage
import GradientBlinds from './GradientBlinds';
<div style={{ width: '100%', height: '600px', position: 'relative' }}>
<GradientBlinds
gradientColors={['#FF9FFC', '#5227FF']}
angle={0}
noise={0.3}
blindCount={12}
spotlightRadius={0.5}
mixBlendMode="lighten"
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gradientColors | string[] | ['#FF9FFC', '#5227FF'] | Gradient colors |
| angle | number | 0 | Rotation angle |
| noise | number | 0.3 | Noise amount |
| blindCount | number | 16 | Number of blinds |
| blindMinWidth | number | 60 | Minimum blind width |
| spotlightRadius | number | 0.5 | Spotlight radius |
| spotlightSoftness | number | 1 | Spotlight softness |
| mouseDampening | number | 0.15 | Mouse dampening |
| mixBlendMode | string | "lighten" | Blend mode |