Color Bends
Customize Color Bends
Add up to 8 colors for the gradient effect
Rotation30°
Speed0.30
Scale1.20
Frequency2.80
Warp Strength1.20
Mouse Influence0.80
Parallax0.60
Noise0.080
Props
| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff5c7a", "#8a5cff", "#00ffd1"] | Array of colors for the gradient effect (1-8 colors) |
| rotation | number | 30 | Rotation angle of the gradient in degrees (0-360) |
| speed | number | 0.3 | Animation speed of the color blends (0-2) |
| scale | number | 1.2 | Scale factor for the gradient (0.1-3) |
| frequency | number | 2.8 | Frequency of the color blending pattern (0.1-5) |
| warpStrength | number | 1.2 | Strength of the warp effect (0-3) |
| mouseInfluence | number | 0.8 | How much mouse movement affects the gradient (0-2) |
| parallax | number | 0.6 | Parallax effect intensity (0-2) |
| noise | number | 0.08 | Noise effect intensity (0-0.5) |
| transparent | boolean | | Enable or disable transparency in the gradient |
| className | string | custom-color-bends | Additional CSS class names for styling |
| width | string | 100% | Width of the color blends container |
| height | string | 500px | Height of the color blends container |
| enableAnimation | boolean | | Enable or disable gradient animation |
| animationType | string | continuous | Type of animation - 'continuous', 'pulse', or 'wave' |
| opacity | number | 1 | Opacity of the gradient (0-1) |
| blendMode | string | normal | CSS blend mode for the gradient effect |
Dependencies
three@react-three/fiber
Created with ❤️ by Cybershoora