Liquid Blob

Animated liquid morphing blob shapes that create a beautiful organic background effect. Perfect for hero sections, cards, and creating depth with glassmorphism style.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/liquid-blob.json"

Examples

Interactive (Hover Me!)

Liquid Blob

import { LiquidBlob } from "@/components/ui/liquid-blob"

// Hover over the container to see the interactive effect!
<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-zinc-900">
  <LiquidBlob interactive />
  <div className="relative z-10 flex h-full items-center justify-center pointer-events-none">
    <h3 className="text-2xl font-bold text-white">Liquid Blob</h3>
  </div>
</div>

Teal Theme

import { LiquidBlob } from "@/components/ui/liquid-blob"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-zinc-900">
  <LiquidBlob 
    color="#10b981"
    secondaryColor="#06b6d4"
    size={350}
    blur={80}
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Teal Theme</h3>
  </div>
</div>

Fast Animation

import { LiquidBlob } from "@/components/ui/liquid-blob"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-zinc-900">
  <LiquidBlob 
    color="#f97316"
    secondaryColor="#ef4444"
    size={250}
    speed={4}
    opacity={0.8}
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Fast Animation</h3>
  </div>
</div>

Props

color

Primary blob color (default: #8b5cf6)

secondaryColor

Secondary blob color (default: #ec4899)

size

Base size of the blobs in pixels (default: 300)

blur

Blur amount for the soft glow effect (default: 60)

speed

Animation duration in seconds (default: 8)

opacity

Blob opacity from 0 to 1 (default: 0.7)

interactive

Enable mouse hover interaction (default: true)