Shader Background

An interactive WebGL shader background featuring a turbulent, glowing wave pattern that responds to mouse movement. It offers an optional backdrop blur for versatile integration into modern UIs.

...

How to Import

Add this import to your component file

app/page.tsx

1import ShaderBackground from '@/components/lightswind/shader-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	The size of the backdrop blur to apply. Valid values are "none", "sm", "md", "lg", "xl", "2xl", "3xl". Defaults to "sm".	Optional
color	string	"#471CE2"	The color of the shader's glow in hexadecimal format (e.g., "#RRGGBB"). Defaults to "#471CE2" (purple).	Optional
className	string	""	Additional CSS classes to apply to the main container div of the shader background. Useful for adding borders, shadows, or other custom styles.	Optional

Basic Usage

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

app/page.tsx

1import ShaderBackground from '@/components/lightswind/shader-background';
2
3// Basic usage with default blur and purple glow
4<ShaderBackground />
5
6// With a larger backdrop blur
7<ShaderBackground backdropBlurAmount="xl" />
8
9// With no backdrop blur and a custom green glow
10<ShaderBackground backdropBlurAmount="none" color="#00FF00" />
11
12// With a custom class name for additional styling
13<ShaderBackground className="border border-primarylw rounded-lg" />
14
15// Combining all props
16<ShaderBackground backdropBlurAmount="md" color="#FF00FF" className="shadow-lg" />

Previousliquid-surface

Nextsatin-flow

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

Shader Background

An interactive WebGL shader background featuring a turbulent, glowing wave pattern that responds to mouse movement. It offers an optional backdrop blur for versatile integration into modern UIs.

...

How to Import

Add this import to your component file

app/page.tsx

1import ShaderBackground from '@/components/lightswind/shader-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	The size of the backdrop blur to apply. Valid values are "none", "sm", "md", "lg", "xl", "2xl", "3xl". Defaults to "sm".	Optional
color	string	"#471CE2"	The color of the shader's glow in hexadecimal format (e.g., "#RRGGBB"). Defaults to "#471CE2" (purple).	Optional
className	string	""	Additional CSS classes to apply to the main container div of the shader background. Useful for adding borders, shadows, or other custom styles.	Optional

Basic Usage

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

app/page.tsx

1import ShaderBackground from '@/components/lightswind/shader-background';
2
3// Basic usage with default blur and purple glow
4<ShaderBackground />
5
6// With a larger backdrop blur
7<ShaderBackground backdropBlurAmount="xl" />
8
9// With no backdrop blur and a custom green glow
10<ShaderBackground backdropBlurAmount="none" color="#00FF00" />
11
12// With a custom class name for additional styling
13<ShaderBackground className="border border-primarylw rounded-lg" />
14
15// Combining all props
16<ShaderBackground backdropBlurAmount="md" color="#FF00FF" className="shadow-lg" />

Previousliquid-surface

Nextsatin-flow

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

Shader Background

How to Import

Props

Basic Usage

On This Page

Contribute

Shader Background

How to Import

Props

Basic Usage

On This Page

Contribute

React Shader Background Component - Lightswind UI

Key Details of React Shader Background

Shader Background

How to Import

Props

Basic Usage

On This Page

Contribute

Shader Background

How to Import

Props

Basic Usage

On This Page

Contribute