Shader Atlas
한국어
◆ Materials

Goo

구이 액체

Wet liquid blobs that merge and bulge inside a shape, with sliding highlights and a translucent body.

Also known as: GooMetaball liquidLiquid blobs

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Goo } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Goo />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Goo } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Goo/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Goo } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Goo />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Goo } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Goo />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Goo',
    }
  ]
}, { disableTelemetry: true })

Props · Goo

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the goo
scaleScale10.1 – 3 (step 0.01)Scale of the goo (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the goo in degrees
gooColorGoo Color#37c95a—Base liquid color (a glossy slime green by default)
translucencyTranslucency0.60 – 1 (step 0.01)Subsurface glow strength — deep lobes transmit more color
absorbAbsorption20 – 6 (step 0.01)How fast thin areas clear and thick areas saturate (Beer–Lambert)
containmentContainment0.90 – 1 (step 0.01)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)
edgeSoftnessEdge Softness0.060 – 0.3 (step 0.005)Softness of the blob coverage edge
blobScaleBlob Size0.30.1 – 1 (step 0.01)Base radius of each liquid lobe
spreadSpread10 – 2 (step 0.01)How far the lobes scatter across the shape
mergeMerge0.60 – 1 (step 0.01)How much the lobes fuse together — low = distinct beads, high = one fused mass
bulgeBulge10 – 1.5 (step 0.01)How 3D-rounded each lobe reads — dome height of the wet surface
thresholdThreshold0.50.2 – 0.9 (step 0.01)Iso-surface level — lower makes fatter, fuller blobs
lightAngleLight Angle3000 – 360 (step 1)Light direction in degrees
wetnessHighlights20 – 5 (step 0.01)Master scale on the sharp specular highlight and clearcoat rim
fresnelFresnel0.250 – 1 (step 0.01)Clearcoat fresnel rim strength wrapping each lobe
specColorHighlight Color#ffffff—Highlight / rim color (white reads as a clear wet coat)
ambientAmbient0.250 – 1 (step 0.01)Base fill so shadowed goo isn't black
speedSpeed0.50 – 2 (step 0.01)Drift and breathe speed of the blobs. 0 pauses.
wobbleWobble0.50 – 1 (step 0.01)Drift amplitude — how far the lobe centers wander
breatheBreathe0.30 – 1 (step 0.01)Radius pulsing amplitude — lobes swell and shrink
seedSeed10 – 100 (step 1)Variation offset — shifts the blob arrangement
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file
shapeTypeshapeTypeSet in code—Active SDF shape type

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Water물 재질

Translucent water with wind-driven waves, reflected sky, and foam along crests and shores.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Liquid Metal액체 금속

Flowing chrome reflections sweep across animated folds in a molten metal surface.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Smoke Fill연기 채우기

Swirling fluid smoke fills a shape and interacts with its boundary.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blob모핑 블롭

Organic animated blob with 3D lighting and gradients.

It looks like droplets joining into one soft mass: blobs merge and highlights slide across their wet surface.

Raise `translucency` for more light inside thick lobes. `containment` controls how closely blobs stay within and follow the shape; `blobScale` changes each lobe's size. Higher `spread` pushes them farther apart, while `merge` controls how much they fuse into one mass.

The effect creates a moving blob, making it useful for playful badges or background accents. Its changing surface is a poor fit when precise edges or small lettering need to lead.

When to use

Use it for gooey buttons, jelly-like icons, or animated decorative backdrops. Avoid it for precise logo contours or small, crisp text.

Open as page ↗