Blob
Organic animated blob with 3D lighting and gradients
Organic animated blob with 3D lighting and gradients
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #ff6b35 | Primary color of the blob |
| colorB | color | #e91e63 | Secondary color of the blob |
| size | range | 0.5 | Size of the blob |
| deformation | range | 0.5 | How organic and blobby the shape is (0 = circle, 1 = very blobby) |
| softness | range | 0.5 | Softness of the blob edges (combines edge width and transition curve) |
| highlightIntensity | range | 0.5 | Intensity of specular highlight effect |
| highlightX | range | 0.3 | Light direction X component |
| highlightY | range | -0.3 | Light direction Y component |
| highlightZ | range | 0.4 | Light direction Z component |
| highlightColor | color | #ffe11a | Color of the specular highlight |
| speed | range | 0.5 | Animation speed |
| seed | range | 1 | Adjusts the starting state, useful for variation |
| center | position | {"x":0.5,"y":0.5} | The center point of the blob |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<Blob />
</Shader>