Reflect Background

A vibrant animated WebGL background that simulates reflected light and fluid motion using a custom shader. Includes optional customizable backdrop blur overlay for immersive depth and layering. Ideal for modern UIs requiring expressive, animated visuals.

...

How to Import

Add this import to your component file

app/page.tsx

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

Previousrays-background

Nextsmokey-background

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

Reflect Background

A vibrant animated WebGL background that simulates reflected light and fluid motion using a custom shader. Includes optional customizable backdrop blur overlay for immersive depth and layering. Ideal for modern UIs requiring expressive, animated visuals.

...

How to Import

Add this import to your component file

app/page.tsx

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

Previousrays-background

Nextsmokey-background

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

Reflect Background

How to Import

Props

Basic Usage

On This Page

Contribute

Reflect Background

How to Import

Props

Basic Usage

On This Page

Contribute

React Reflect Background Component - Lightswind UI

Key Details of React Reflect Background

Reflect Background

How to Import

Props

Basic Usage

On This Page

Contribute

Reflect Background

How to Import

Props

Basic Usage

On This Page

Contribute