---
title: "Transition: blob"
description: An organic, wobbling blob grows from a point to reveal content, and shrinks to hide it.
---

Blob is a soft, liquid cousin of [iris](/effects/transition-iris). The opening is a smooth outline through a few points that each swell and shrink as it grows. Use it for playful content, such as a chat bubble, a sticker or a reaction.

## Usage

The sample grows a chat bubble out of its tail in the bottom right corner, and melts it back into the same corner.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.KapowAnimatedVisibility
import com.jantursky.kapow.KapowEnter
import com.jantursky.kapow.KapowExit

@Composable
fun Bubble(visible: Boolean) {
    KapowAnimatedVisibility(
        visible = visible,
        enter = KapowEnter.blob(origin = TransformOrigin(1f, 1f)),
        exit = KapowExit.blob(origin = TransformOrigin(1f, 1f)),
    ) {
        Box(Modifier.size(240.dp, 72.dp).background(Color.DarkGray))
    }
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `origin` | `TransformOrigin.Center` | The point the blob grows from or shrinks to, as a fraction of the content's size. |
| `duration` | `600.milliseconds` | How long the transition takes. Must be positive. |
| `points` | `9` | How many points the outline runs through, from 4 to 32. More points give a more irregular outline. |
| `wobble` | `0.25f` | How far each point swells and shrinks, as a share of its radius, from 0 (a plain circle) to 0.5. The bigger the wobble and the fewer the points, the further the blob has to grow to cover the content, so it covers it earlier than a plain circle would. |
| `seed` | `53` | The seed of the wobble. The same seed gives the same blob on every target. |

Every transition also has `.delay(...)`, `.easing(...)` and `.reducedMotion(...)`. See [Stagger](/effects/transition-stagger).

## Reduced motion

The transition becomes a fade over the same duration or shorter. There is no mask.

## Notes

- Available as `KapowEnter.blob()` and `KapowExit.blob()`. The exit runs the enter in reverse.
- The wobble is seeded, so it is the same on every run.
- The blob grows a little past the farthest corner, enough that it covers the content even where it is narrowest.
- The mask is drawn with an offscreen layer and a blend mode, so it works on all targets, including Android API 23.

## Live example

<iframe class="live-example" src="https://kapow-demo.vercel.app/#transition-blob" title="Live example: transition-blob" loading="lazy" allow="autoplay"></iframe>