Holographic Wave

A premium WebGL-based holographic/iridescent wave shader background component. It renders flowing fluid wave ribbons with organic metallic light reflections that smoothly respond to mouse cursor coordinates. The component features automatic light and dark mode styling adjustments.

...

How to Import

Add this import to your component file

app/page.tsx

1import HolographicWave from "@/components/lightswind/holographic-wave"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

speed	number	1.0	Animation speed multiplier for wave propagation.	Optional
frequency	number	1.0	Wave frequency, controlling the tightness and count of wave folds.	Optional
intensity	number	1.0	Shader color intensity and transparency multiplier.	Optional
theme	"light" \| "dark" \| "system"	"system"	Contrast styling theme setting. 'system' dynamically tracks document theme class mutations.	Optional

Basic Usage

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

app/page.tsx

1import HolographicWave from "@/components/lightswind/holographic-wave";
2
3export function Demo() {
4  return (
5    <div className="w-full h-[500px] relative">
6      <HolographicWave speed={1.0} frequency={1.0} intensity={0.9} theme="system" />
7    </div>
8  );
9}

Variants

Different visual and behavioral variants of the component

Slow Subtle Flow Variant

A calmer flow variant: `speed={0.5}` and `intensity={0.5}`.

Preview not available for this example.

Previouscosmic-singularity

Nextcosmic-dust

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

Holographic Wave

A premium WebGL-based holographic/iridescent wave shader background component. It renders flowing fluid wave ribbons with organic metallic light reflections that smoothly respond to mouse cursor coordinates. The component features automatic light and dark mode styling adjustments.

...

How to Import

Add this import to your component file

app/page.tsx

1import HolographicWave from "@/components/lightswind/holographic-wave"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

speed	number	1.0	Animation speed multiplier for wave propagation.	Optional
frequency	number	1.0	Wave frequency, controlling the tightness and count of wave folds.	Optional
intensity	number	1.0	Shader color intensity and transparency multiplier.	Optional
theme	"light" \| "dark" \| "system"	"system"	Contrast styling theme setting. 'system' dynamically tracks document theme class mutations.	Optional

Basic Usage

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

app/page.tsx

1import HolographicWave from "@/components/lightswind/holographic-wave";
2
3export function Demo() {
4  return (
5    <div className="w-full h-[500px] relative">
6      <HolographicWave speed={1.0} frequency={1.0} intensity={0.9} theme="system" />
7    </div>
8  );
9}

Variants

Different visual and behavioral variants of the component

Slow Subtle Flow Variant

A calmer flow variant: `speed={0.5}` and `intensity={0.5}`.

Preview not available for this example.

Previouscosmic-singularity

Nextcosmic-dust

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

Holographic Wave

How to Import

Props

Basic Usage

Variants

Slow Subtle Flow Variant

On This Page

Contribute

Holographic Wave

How to Import

Props

Basic Usage

Variants

Slow Subtle Flow Variant

On This Page

Contribute

React Holographic Wave Component - Lightswind UI

Key Details of React Holographic Wave

Holographic Wave

How to Import

Props

Basic Usage

Variants

Slow Subtle Flow Variant

On This Page

Contribute

Holographic Wave

How to Import

Props

Basic Usage

Variants

Slow Subtle Flow Variant

On This Page

Contribute