Ai Aurora Blob

A gorgeous WebGL OGL 3D Perlin noise Soft Aurora fluid wave sphere component with real-time mouse interaction and customizable cosine gradients for AI voice assistants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component width & height in pixels.	Optional
color1	string	"#10b981"	Primary HEX gradient color string.	Optional
color2	string	"#6366f1"	Secondary HEX gradient color string.	Optional
variant	"listening" \| "thinking" \| "speaking" \| "orbit" \| "pulse"	"listening"	AI Voice Assistant state mode.	Optional
enableMouseInteraction	boolean	true	Enable mouse warp interaction.	Optional

Basic Usage

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

app/page.tsx

1import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiAuroraBlob
7        size={320}
8        variant="listening"
9        color1="#10b981"
10        color2="#6366f1"
11        enableMouseInteraction={true}
12      />
13    </div>
14  );
15}

Previousai-gooey-blob

Nextai-code-block

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

Ai Aurora Blob

A gorgeous WebGL OGL 3D Perlin noise Soft Aurora fluid wave sphere component with real-time mouse interaction and customizable cosine gradients for AI voice assistants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

size	number	260	Component width & height in pixels.	Optional
color1	string	"#10b981"	Primary HEX gradient color string.	Optional
color2	string	"#6366f1"	Secondary HEX gradient color string.	Optional
variant	"listening" \| "thinking" \| "speaking" \| "orbit" \| "pulse"	"listening"	AI Voice Assistant state mode.	Optional
enableMouseInteraction	boolean	true	Enable mouse warp interaction.	Optional

Basic Usage

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

app/page.tsx

1import { AiAuroraBlob } from "@/components/lightswind/ai-aurora-blob";
2
3export function Demo() {
4  return (
5    <div className="flex items-center justify-center p-8">
6      <AiAuroraBlob
7        size={320}
8        variant="listening"
9        color1="#10b981"
10        color2="#6366f1"
11        enableMouseInteraction={true}
12      />
13    </div>
14  );
15}

Previousai-gooey-blob

Nextai-code-block

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

Ai Aurora Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Aurora Blob

How to Import

Props

Basic Usage

On This Page

Contribute

React Ai Aurora Blob Component - Lightswind UI

Key Details of React Ai Aurora Blob

Ai Aurora Blob

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Aurora Blob

How to Import

Props

Basic Usage

On This Page

Contribute