Documentation

GuidesComponents

Blob

Organic animated blob with 3D lighting and gradients

Props

colorAstring
Default:#ff6b35
Primary color of the blob
colorBstring
Default:#e91e63
Secondary color of the blob
sizenumber
Default:0.5
Size of the blob
deformationnumber
Default:0.5
How organic and blobby the shape is (0 = circle, 1 = very blobby)
softnessnumber
Default:0.5
Softness of the blob edges (combines edge width and transition curve)
highlightIntensitynumber
Default:0.5
Intensity of specular highlight effect
highlightXnumber
Default:0.3
Light direction X component
highlightYnumber
Default:-0.3
Light direction Y component
highlightZnumber
Default:0.4
Light direction Z component
highlightColorstring
Default:#ffe11a
Color of the specular highlight
speednumber
Default:0.5
Animation speed
seednumber
Default:1
Adjusts the starting state, useful for variation
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
The center point of the blob
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space for color interpolation

Usage

<Shader>
  <Blob />
</Shader>
Previous
Beam
Next
Blur