Blob Component

Organic blob shapes with morphing animation. Combine blob-{shape} with size (w-* h-*), color (bg-*), and animation (animate-blob-morph) utilities.

Notes

Use blob-{shape} for a static organic shape.
Add animate-blob-morph (or variants animate-blob-morph1 ~ animate-blob-morph4) for continuous morphing.
Append -{ms} for custom duration, e.g. animate-blob-morph3000.
Shapes are clip-path-free — simply irregular border-radius values, fully compatible with overflow:hidden for images.

All shapes

circle

blob-circle

tri

blob-triangle

dmd

blob-diamond

oval

blob-oval

tent

blob-tent

shld

blob-shield

peb

blob-pebble

amo

blob-amoeba

drp

blob-droplet

kid

blob-kidney

brg

blob-burger

leaf

blob-leaf

pet

blob-petal

olv

blob-olive

ell

blob-ellipse

Morph animation

4 variants are available in addition to the default morph.

def

animate-blob-morph

animate-blob-morph1

animate-blob-morph2

animate-blob-morph3

animate-blob-morph4

Dynamic duration

Multiple time formats are supported:

1. Integer value, e.g. *-3000 (3000ms)
2. Bracketed integer, e.g. *-[3000] (3000ms)
3. Bracketed time string, e.g. *-[4s], *-[2000ms]

animate-blob-morph-2000

animate-blob-morph1-3000

animate-blob-morph2-5000

animate-blob-morph-6000

[4s]

animate-blob-morph-[4s]

Color variants

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

prim

bg-primary

err

bg-error

bg-success

info

bg-info

warn

bg-warning

raw

bg-[#ff00ff]

grad

bg-gradient

Size variants

w-12 h-12

w-16 h-16

w-20 h-20

w-28 h-28

2XL

w-36 h-36

Use cases

Avatar container

blob-diamond

blob-pebble

Icon container