Wave Background

An animated WebGL background featuring fluid wave distortions with vibrant color shifting. Supports optional customizable backdrop blur overlay for enhanced visual layering. Ideal for dynamic, modern UIs that require an artistic background element.

...

How to Import

Add this import to your component file

app/page.tsx

1import WaveBackground from '@/components/lightswind/wave-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	Controls the intensity of the backdrop blur applied over the animated canvas. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl".	Optional
className	string	""	Optional Tailwind CSS class string for styling the outer container (e.g., border, height, width, padding).	Optional

Basic Usage

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

app/page.tsx

1import WaveBackground from '@/components/lightswind/wave-background';
2
3// Basic usage with default (sm) blur
4<WaveBackground />
5
6// With a medium backdrop blur
7<WaveBackground backdropBlurAmount="md" />
8
9// With maximum blur and custom border styling
10<WaveBackground backdropBlurAmount="3xl" className="border-2 border-cyan-600 rounded-2xl" />
11
12// With responsive height and full screen width
13<WaveBackground className="h-[60vh] w-screen" />
14
15// Combining all props
16<WaveBackground backdropBlurAmount="xl" className="rounded-xl shadow-lg border border-neutral-700" />

Previousstripes-background

Nextquantum-field

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

Wave Background

An animated WebGL background featuring fluid wave distortions with vibrant color shifting. Supports optional customizable backdrop blur overlay for enhanced visual layering. Ideal for dynamic, modern UIs that require an artistic background element.

...

How to Import

Add this import to your component file

app/page.tsx

1import WaveBackground from '@/components/lightswind/wave-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	Controls the intensity of the backdrop blur applied over the animated canvas. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl".	Optional
className	string	""	Optional Tailwind CSS class string for styling the outer container (e.g., border, height, width, padding).	Optional

Basic Usage

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

app/page.tsx

1import WaveBackground from '@/components/lightswind/wave-background';
2
3// Basic usage with default (sm) blur
4<WaveBackground />
5
6// With a medium backdrop blur
7<WaveBackground backdropBlurAmount="md" />
8
9// With maximum blur and custom border styling
10<WaveBackground backdropBlurAmount="3xl" className="border-2 border-cyan-600 rounded-2xl" />
11
12// With responsive height and full screen width
13<WaveBackground className="h-[60vh] w-screen" />
14
15// Combining all props
16<WaveBackground backdropBlurAmount="xl" className="rounded-xl shadow-lg border border-neutral-700" />

Previousstripes-background

Nextquantum-field

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

Wave Background

How to Import

Props

Basic Usage

On This Page

Contribute

Wave Background

How to Import

Props

Basic Usage

On This Page

Contribute

React Wave Background Component - Lightswind UI

Key Details of React Wave Background

Wave Background

How to Import

Props

Basic Usage

On This Page

Contribute

Wave Background

How to Import

Props

Basic Usage

On This Page

Contribute