Blob

Organic animated blob with 3D lighting and gradients

Props

originstring

Default:center

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

origin

stringDefault: center

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

colorAstring

Default:#ff6b35

Primary color of the blob

colorA

stringDefault: #ff6b35

Primary color of the blob

colorBstring

Default:#e91e63

Secondary color of the blob

colorB

stringDefault: #e91e63

Secondary color of the blob

stopsobject

Default:null

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

stops

objectDefault: null

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

sizenumber

Default:0.5

Size of the blob

size

numberDefault: 0.5

Size of the blob

deformationnumber

Default:0.5

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

deformation

numberDefault: 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)

softness

numberDefault: 0.5

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

highlightIntensitynumber

Default:0.5

Intensity of specular highlight effect

highlightIntensity

numberDefault: 0.5

Intensity of specular highlight effect

highlightXnumber

Default:0.3

Light direction X component

highlightX

numberDefault: 0.3

Light direction X component

highlightYnumber

Default:-0.3

Light direction Y component

highlightY

numberDefault: -0.3

Light direction Y component

highlightZnumber

Default:0.4

Light direction Z component

highlightZ

numberDefault: 0.4

Light direction Z component

highlightColorstring

Default:#ffe11a

Color of the specular highlight

highlightColor

stringDefault: #ffe11a

Color of the specular highlight

speednumber

Default:0.5

Animation speed

speed

numberDefault: 0.5

Animation speed

seednumber

Default:1

Adjusts the starting state, useful for variation

seed

numberDefault: 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

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

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Blob />
</Shader>

<Shader>
  <Blob />
</Shader>

<Shader>
  <Blob />
</Shader>

<Shader>
  <Blob />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Blob', props: {} }
  ]
})

Beam

BlockNoise