Ai Fluid Blob

A stunning WebGL OGL multi-strand chromatic liquid wave energy flow component with a glass refraction lens sphere. Custom WebGL shaders render real-time fluid energy strands and glass sphere optical distortion for AI voice assistants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component width & height in pixels.	Optional
colors	string[]	['#10B981', '#06B6D4', '#3B82F6', '#6366F1']	Array of HEX color strings for fluid strands.	Optional
count	number	4	Number of fluid strands (1 to 12).	Optional
variant	"listening" \| "thinking" \| "speaking" \| "orbit" \| "pulse"	"listening"	AI Voice Assistant state mode.	Optional
glass	boolean	true	Enable glass sphere refraction lens.	Optional

Basic Usage

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

app/page.tsx

1import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiFluidBlob
7        size={320}
8        variant="listening"
9        colors={['#10B981', '#06B6D4', '#3B82F6', '#6366F1']}
10        glass={true}
11      />
12    </div>
13  );
14}

Previoussidebar

Next3d-animated-pin

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

Ai Fluid Blob

A stunning WebGL OGL multi-strand chromatic liquid wave energy flow component with a glass refraction lens sphere. Custom WebGL shaders render real-time fluid energy strands and glass sphere optical distortion for AI voice assistants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component width & height in pixels.	Optional
colors	string[]	['#10B981', '#06B6D4', '#3B82F6', '#6366F1']	Array of HEX color strings for fluid strands.	Optional
count	number	4	Number of fluid strands (1 to 12).	Optional
variant	"listening" \| "thinking" \| "speaking" \| "orbit" \| "pulse"	"listening"	AI Voice Assistant state mode.	Optional
glass	boolean	true	Enable glass sphere refraction lens.	Optional

Basic Usage

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

app/page.tsx

1import { AiFluidBlob } from "@/components/lightswind-pro/ai-fluid-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiFluidBlob
7        size={320}
8        variant="listening"
9        colors={['#10B981', '#06B6D4', '#3B82F6', '#6366F1']}
10        glass={true}
11      />
12    </div>
13  );
14}

Previoussidebar

Next3d-animated-pin

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

Ai Fluid Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Fluid Blob

How to Import

Props

Basic Usage

On This Page

Contribute

React Ai Fluid Blob Component - Lightswind UI

Key Details of React Ai Fluid Blob

Ai Fluid Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Fluid Blob

How to Import

Props

Basic Usage

On This Page

Contribute