Shader
Shader component with two variants for gradient and hurricane both can be configured.
Loading...
Installation
Usage
<ShaderGradient
colors={["#8C59D9", "#D973A6", "#73A6F2"]}
animate
intensity={1.2}
density={0.8}
className="absolute inset-0"
/>
// Hurricane — full control
<ShaderHurricane
colors={["#00f2fe", "#4facfe", "#ffd700"]}
background="#0a0a0a"
intensity={1.5}
density={0.6}
speed={1.2}
className="absolute inset-0"
/>Examples
Shader Hurricane
Loading...
Props
ShaderHurricane
| Prop | Type | Default |
|---|---|---|
speed? | number | 0.2 |
density? | number | 1 |
intensity? | number | 1 |
background? | string | #0a0a0a |
colors? | [string, string, string] | ['#00f2fe','#4facfe','#ffd700'] |
ShaderGradient
| Prop | Type | Default |
|---|---|---|
density? | number | 1 |
intensity? | number | 1 |
animate? | boolean | |
colors? | [string, string, string] | ['#8C59D9', '#D973A6','#73A6F2'] |