Morph Blob - Liquid SVG Shape Animation Component

Beautiful liquid SVG blobs that continuously morph and flow like organic shapes. Features multiple shape variants (organic, smooth, spiky, wave), gradient colors, glow effects, and customizable animation speed. Perfect for backgrounds, avatars, loaders, and creative UI accents.

Installation

npx shadcn@latest add "https://ui-struct.vercel.app/r/morph-blob"

Usage

import MorphBlob from "@/components/ui/morph-blob";

<MorphBlob
  size={300}
  gradientColors={['#8B5CF6', '#EC4899']}
  glow={true}
/>

Preview

Watch the blob continuously morph and flow like liquid.

'use client';
import MorphBlob from './morph-blob';

export default function MorphBlobDefault() {
  return (
    <div className="flex items-center justify-center min-h-[400px] p-8 bg-neutral-950 rounded-2xl mx-4">
      <MorphBlob
        size={280}
        gradientColors={['#8B5CF6', '#EC4899']}
        glow={true}
        glowIntensity={30}
      />
    </div>
  );
}

Shape Variants

Four different blob shape styles for various aesthetics.

Organic

Smooth

Spiky

Wave

Variant	Description
`organic`	Natural, irregular shapes
`smooth`	Soft, flowing transitions
`spiky`	Sharper, more angular edges
`wave`	Wavy, undulating forms

Colors & Gradients

Solid colors, gradients, and glow effects.

Gradient Direction	Effect
`horizontal`	Left to right
`vertical`	Top to bottom
`diagonal`	Corner to corner

Layered Blobs

Stack multiple blobs for depth and visual richness.

Liquid

Morphing Layers

Background Effect

Create stunning hero sections with blob backgrounds.

✨ Introducing v2.0

Beautiful Liquid
Backgrounds

Create stunning visual effects with morphing SVG blobs that flow and animate smoothly.

Card Accents

Use blobs as decorative elements in cards.

Lightning Fast

Optimized performance with instant load times and smooth animations.

Pro Plan

$29/mo

✓ Unlimited projects
✓ Priority support
✓ Custom domains
✓ Analytics

Avatar Backgrounds

Dynamic backgrounds for user avatars.

Sarah Chen

Designer

Alex Kim

Developer

Emma Davis

Product

Loading States

Creative loading indicators with morphing blobs.

Processing...

Syncing...

Animation Speed

Control how fast the blob morphs.

Fast (3s)

Medium (6s)

Slow (10s)

Very Slow (15s)

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`size`	`number`	`300`	Width and height in pixels
`color`	`string`	`'#8B5CF6'`	Solid fill color
`gradientColors`	`[string, string]`	-	Gradient start/end colors
`gradientDirection`	`'horizontal' \| 'vertical' \| 'diagonal'`	`'diagonal'`	Gradient direction
`duration`	`number`	`8`	Animation cycle in seconds
`blur`	`number`	`0`	Blur amount in pixels
`glow`	`boolean`	`false`	Enable glow effect
`glowIntensity`	`number`	`20`	Glow blur radius
`variant`	`'organic' \| 'smooth' \| 'spiky' \| 'wave'`	`'organic'`	Shape style

Creative Tips

Background Composition

// Multiple blobs with different positions and opacities
<div className="relative overflow-hidden">
  <div className="absolute -top-20 -left-20 opacity-40">
    <MorphBlob size={400} gradientColors={['#3B82F6', '#8B5CF6']} blur={3} />
  </div>
  <div className="absolute -bottom-20 -right-20 opacity-40">
    <MorphBlob size={400} gradientColors={['#EC4899', '#F97316']} blur={3} />
  </div>
  {/* Your content */}
</div>

Performance

Use blur sparingly as it can impact performance
Larger size values may slow down animations
Consider reducing particleCount on mobile devices