Beam Flow

A high-performance WebGL laser flow shader with dynamic fog turbulence, directional cursor tilt, and animated micro-wisp streaks.

...

How to Import

Add this import to your component file

app/page.tsx

1import { BeamFlow } from "@/components/lightswind-pro/beam-flow"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

color	string	"#FF79C6"	Primary hex color string.	Optional
wispDensity	number	1.0	Density factor for animated micro-wisp streaks.	Optional
wispSpeed	number	15.0	Speed of moving wisps.	Optional
wispIntensity	number	5.0	Intensity of micro-wisp streaks.	Optional
fogIntensity	number	0.45	Volumetric fog intensity.	Optional
fogScale	number	0.3	Noise scale of fog volume.	Optional
mouseTiltStrength	number	0.01	Sensitivity of fog distortion to mouse movement.	Optional
flowSpeed	number	0.35	Velocity of beam pulse flow.	Optional

Basic Usage

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

app/page.tsx

1import { BeamFlow } from "@/components/lightswind-pro/beam-flow";
2
3export function Demo() {
4  return (
5    <div className="relative w-full h-[500px]">
6      <BeamFlow color="#FF79C6" wispDensity={1.2} flowSpeed={0.4} fogIntensity={0.5} />
7    </div>
8  );
9}

Previous3d-holographic-deck

Nextmeteors-flow

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

Beam Flow

A high-performance WebGL laser flow shader with dynamic fog turbulence, directional cursor tilt, and animated micro-wisp streaks.

...

How to Import

Add this import to your component file

app/page.tsx

1import { BeamFlow } from "@/components/lightswind-pro/beam-flow"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

color	string	"#FF79C6"	Primary hex color string.	Optional
wispDensity	number	1.0	Density factor for animated micro-wisp streaks.	Optional
wispSpeed	number	15.0	Speed of moving wisps.	Optional
wispIntensity	number	5.0	Intensity of micro-wisp streaks.	Optional
fogIntensity	number	0.45	Volumetric fog intensity.	Optional
fogScale	number	0.3	Noise scale of fog volume.	Optional
mouseTiltStrength	number	0.01	Sensitivity of fog distortion to mouse movement.	Optional
flowSpeed	number	0.35	Velocity of beam pulse flow.	Optional

Basic Usage

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

app/page.tsx

1import { BeamFlow } from "@/components/lightswind-pro/beam-flow";
2
3export function Demo() {
4  return (
5    <div className="relative w-full h-[500px]">
6      <BeamFlow color="#FF79C6" wispDensity={1.2} flowSpeed={0.4} fogIntensity={0.5} />
7    </div>
8  );
9}

Previous3d-holographic-deck

Nextmeteors-flow

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

Beam Flow

How to Import

Props

Basic Usage

On This Page

Contribute

Beam Flow

How to Import

Props

Basic Usage

On This Page

Contribute

React Beam Flow Component - Lightswind UI

Key Details of React Beam Flow

Beam Flow

How to Import

Props

Basic Usage

On This Page

Contribute

Beam Flow

How to Import

Props

Basic Usage

On This Page

Contribute