Cosmic Dust

An advanced, neat, and highly interactive floating stardust particle background component built on HTML5 2D Canvas. It renders hundreds of microscopic dust grains with fading trailing lines. The dust is affected by gentle vector wind fields and swirls dynamically in a vortex around the cursor. It automatically adapts color palettes, opacity levels, and particle glows between light and dark themes.

...

How to Import

Add this import to your component file

app/page.tsx

1import CosmicDust from "@/components/lightswind/cosmic-dust"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

particleCount	number	120	The total number of stardust particles active on the canvas.	Optional
speedMultiplier	number	1.0	Velocity modifier for particle movement and vortex swirl physics.	Optional
particleSize	number	1.5	Base radius scale of the individual dust grain core in pixels.	Optional
theme	"light" \| "dark" \| "system"	"system"	Select contrast style. 'system' maps to html dark mode changes dynamically.	Optional

Basic Usage

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

app/page.tsx

1import CosmicDust from "@/components/lightswind/cosmic-dust";
2
3export function Demo() {
4  return (
5    <div className="w-full h-[500px] relative overflow-hidden bg-background">
6      <CosmicDust particleCount={150} speedMultiplier={1.0} particleSize={1.5} theme="system" />
7    </div>
8  );
9}

Variants

Different visual and behavioral variants of the component

Calm Nebulous Dust Variant

Set `particleCount={80}` and `speedMultiplier={0.5}` for a slower, more ambient backdrop.

Preview not available for this example.

Previousholographic-wave

Nextwavy-ripple-background

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

Cosmic Dust

An advanced, neat, and highly interactive floating stardust particle background component built on HTML5 2D Canvas. It renders hundreds of microscopic dust grains with fading trailing lines. The dust is affected by gentle vector wind fields and swirls dynamically in a vortex around the cursor. It automatically adapts color palettes, opacity levels, and particle glows between light and dark themes.

...

How to Import

Add this import to your component file

app/page.tsx

1import CosmicDust from "@/components/lightswind/cosmic-dust"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

particleCount	number	120	The total number of stardust particles active on the canvas.	Optional
speedMultiplier	number	1.0	Velocity modifier for particle movement and vortex swirl physics.	Optional
particleSize	number	1.5	Base radius scale of the individual dust grain core in pixels.	Optional
theme	"light" \| "dark" \| "system"	"system"	Select contrast style. 'system' maps to html dark mode changes dynamically.	Optional

Basic Usage

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

app/page.tsx

1import CosmicDust from "@/components/lightswind/cosmic-dust";
2
3export function Demo() {
4  return (
5    <div className="w-full h-[500px] relative overflow-hidden bg-background">
6      <CosmicDust particleCount={150} speedMultiplier={1.0} particleSize={1.5} theme="system" />
7    </div>
8  );
9}

Variants

Different visual and behavioral variants of the component

Calm Nebulous Dust Variant

Set `particleCount={80}` and `speedMultiplier={0.5}` for a slower, more ambient backdrop.

Preview not available for this example.

Previousholographic-wave

Nextwavy-ripple-background

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

Cosmic Dust

How to Import

Props

Basic Usage

Variants

Calm Nebulous Dust Variant

On This Page

Contribute

Cosmic Dust

How to Import

Props

Basic Usage

Variants

Calm Nebulous Dust Variant

On This Page

Contribute

React Cosmic Dust Component - Lightswind UI

Key Details of React Cosmic Dust

Cosmic Dust

How to Import

Props

Basic Usage

Variants

Calm Nebulous Dust Variant

On This Page

Contribute

Cosmic Dust

How to Import

Props

Basic Usage

Variants

Calm Nebulous Dust Variant

On This Page

Contribute