Docs/Liquid Blob

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.

Installation

$pnpm dlx shadcn@latest add @componentry/liquid-blob

Usage

API Reference

PropTypeDefault
colorPrimary blob color.
string"#8b5cf6"
secondaryColorSecondary blob color.
string"#ec4899"
sizeBase size of the blobs in pixels.
number300
blurBlur amount for the soft glow effect.
number60
speedAnimation duration in seconds.
number8
opacityBlob opacity from 0 to 1.
number0.7
interactiveEnable mouse hover interaction.
booleantrue

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

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>