Stardust
Floating particle noise with moving speckles creating a cosmic stardust effect.
Main Features of Stardust
How to Use Stardust in Next.js
Installation Guide for Stardust
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #0f172a | Background color |
gradientFrom | string | #1e293b | Gradient start color |
gradientTo | string | #0f172a | Gradient end color |
baseNoiseOpacity | number | 0.1 | Base noise opacity |
baseNoiseBaseFrequency | string | 0.8 | Base noise frequency |
baseNoiseOctaves | number | 3 | Base noise octaves |
layer1Opacity | number | 0.15 | First layer opacity |
layer1BaseFrequency | string | 1.2 | First layer frequency |
layer1Octaves | number | 3 | First layer octaves |
layer1ColorMatrix | string | 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0 | First layer color matrix |
layer1BackgroundSize | string | 200px 200px | First layer background size |
layer1Duration | number | 20 | First layer animation duration |
layer2Opacity | number | 0.1 | Second layer opacity |
layer2BaseFrequency | string | 0.6 | Second layer frequency |
layer2Octaves | number | 3 | Second layer octaves |
layer2ColorMatrix | string | 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0 | Second layer color matrix |
layer2BackgroundSize | string | 150px 150px | Second layer background size |
layer2Duration | number | 15 | Second layer animation duration |
text | string | Stardust | Text label |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow many layers of stars are there?
There are two primary animation layers (`layer1` and `layer2`) that move at different speeds to create a sense of 3D depth and parallax.
QCan I change the star density?
Yes, you can adjust the `baseNoiseBaseFrequency` and layer frequencies to make the 'stars' appear smaller/denser or larger/sparser.
QIs it high-performance?
Yes, it uses hardware-accelerated CSS transforms for the moving layers, ensuring smooth 60fps movement even on high-resolution displays.