ColorWheel
A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors
A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "rainbow" | "custom" | rainbow | Rainbow cycles through the full spectrum; Custom loops through your three chosen colors |
| colorA | color | #ff0000 | First color in the cycle |
| colorB | color | #00ff88 | Second color in the cycle |
| colorC | color | #0066ff | Third color in the cycle |
| scale | range | 1 | Number of color cycles across the viewport |
| angle | range | 0 | Direction the gradient flows |
| speed | range | 0.05 | Speed at which the gradient cycles |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | oklch | Color space for blending between custom colors |
Usage
vue
<Shader>
<ColorWheel />
</Shader>