Ai Gooey Blob

A mesmerising SVG liquid metaball gooey blob loader and AI state visualizer. Uses SVG feGaussianBlur and feColorMatrix filters to fuse satellite liquid droplets into a central glowing nucleus. Features orbit, pulse morph, wave flow, and cursor-following interactive animation modes.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component diameter in pixels.	Optional
variant	"orbit" \| "pulse" \| "wave" \| "interactive"	"orbit"	Liquid blob animation preset mode.	Optional
color	string	"#6366f1"	Primary gradient start color.	Optional
colorSecondary	string	"#a855f7"	Secondary gradient end color.	Optional
blobCount	number	4	Number of orbiting satellite metaballs (2 to 6).	Optional
speed	number	1	Animation velocity multiplier.	Optional
glow	boolean	true	Enable background neon glow aura.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiGooeyBlob
7        size={240}
8        variant="orbit"
9        color="#6366f1"
10        colorSecondary="#a855f7"
11        label="AI Thinking..."
12      />
13    </div>
14  );
15}

PreviousGlassmorphic Aura Tiers

Nextai-aurora-blob

A product byＭＵＨＩＬＡＮ and Team❤️.

Ai Gooey Blob

A mesmerising SVG liquid metaball gooey blob loader and AI state visualizer. Uses SVG feGaussianBlur and feColorMatrix filters to fuse satellite liquid droplets into a central glowing nucleus. Features orbit, pulse morph, wave flow, and cursor-following interactive animation modes.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component diameter in pixels.	Optional
variant	"orbit" \| "pulse" \| "wave" \| "interactive"	"orbit"	Liquid blob animation preset mode.	Optional
color	string	"#6366f1"	Primary gradient start color.	Optional
colorSecondary	string	"#a855f7"	Secondary gradient end color.	Optional
blobCount	number	4	Number of orbiting satellite metaballs (2 to 6).	Optional
speed	number	1	Animation velocity multiplier.	Optional
glow	boolean	true	Enable background neon glow aura.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AiGooeyBlob } from "@/components/lightswind/ai-gooey-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiGooeyBlob
7        size={240}
8        variant="orbit"
9        color="#6366f1"
10        colorSecondary="#a855f7"
11        label="AI Thinking..."
12      />
13    </div>
14  );
15}

PreviousGlassmorphic Aura Tiers

Nextai-aurora-blob

A product byＭＵＨＩＬＡＮ and Team❤️.

Ai Gooey Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Gooey Blob

How to Import

Props

Basic Usage

On This Page

Contribute

React Ai Gooey Blob Component - Lightswind UI

Key Details of React Ai Gooey Blob

Ai Gooey Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Gooey Blob

How to Import

Props

Basic Usage

On This Page

Contribute