Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Goo

Photoreal wet liquid — animated 3D metaball blobs that merge and bulge to loosely form the shape, with sliding wet highlights, a clearcoat rim and a translucent body

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.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the goo
scalenumber
Default:1
Scale of the goo (1 = default size)
rotationnumber
Default:0
Rotation of the goo in degrees
gooColorstring
Default:#37c95a
Base liquid color (a glossy slime green by default)
translucencynumber
Default:0.6
Subsurface glow strength — deep lobes transmit more color
absorbnumber
Default:2
How fast thin areas clear and thick areas saturate (Beer–Lambert)
containmentnumber
Default:0.9
0 = free blobs that ignore the shape, 1 = goo fills the shape and its surface conforms to the 3D form (highlights track the faces as it rotates)
edgeSoftnessnumber
Default:0.06
Softness of the blob coverage edge
blobScalenumber
Default:0.3
Base radius of each liquid lobe
spreadnumber
Default:1
How far the lobes scatter across the shape
mergenumber
Default:0.6
How much the lobes fuse together — low = distinct beads, high = one fused mass
bulgenumber
Default:1
How 3D-rounded each lobe reads — dome height of the wet surface
thresholdnumber
Default:0.5
Iso-surface level — lower makes fatter, fuller blobs
lightAnglenumber
Default:300
Light direction in degrees
wetnessnumber
Default:2
Master scale on the sharp specular highlight and clearcoat rim
fresnelnumber
Default:0.25
Clearcoat fresnel rim strength wrapping each lobe
specColorstring
Default:#ffffff
Highlight / rim color (white reads as a clear wet coat)
ambientnumber
Default:0.25
Base fill so shadowed goo isn't black
speednumber
Default:0.5
Drift and breathe speed of the blobs. 0 pauses.
wobblenumber
Default:0.5
Drift amplitude — how far the lobe centers wander
breathenumber
Default:0.3
Radius pulsing amplitude — lobes swell and shrink
seednumber
Default:1
Variation offset — shifts the blob arrangement
shapeShapeConfig
Default:circleSDF
Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstring
Default:""
URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Goo />
</Shader>
Previous
Godrays
Next
GradientMap