Blob

Organic animated blob with 3D lighting and gradients

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • colorA

    Primary color of the blob

    Type
    string
    Default
    #ff6b35

  • colorB

    Secondary color of the blob

    Type
    string
    Default
    #e91e63

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    null

  • size

    Size of the blob

    Type
    number
    Default
    0.5

  • deformation

    How organic and blobby the shape is (0 = circle, 1 = very blobby)

    Type
    number
    Default
    0.5

  • softness

    Softness of the blob edges (combines edge width and transition curve)

    Type
    number
    Default
    0.5

  • highlightIntensity

    Intensity of specular highlight effect

    Type
    number
    Default
    0.5

  • highlightX

    Light direction X component

    Type
    number
    Default
    0.3

  • highlightY

    Light direction Y component

    Type
    number
    Default
    -0.3

  • highlightZ

    Light direction Z component

    Type
    number
    Default
    0.4

  • highlightColor

    Color of the specular highlight

    Type
    string
    Default
    #ffe11a

  • speed

    Animation speed

    Type
    number
    Default
    0.5

  • seed

    Adjusts the starting state, useful for variation

    Type
    number
    Default
    1

  • center

    The center point of the blob

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <Blob />
</Shader>