Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Main Features of Interstellar Fluid Hero
How to Use Interstellar Fluid Hero in Next.js
Installation Guide for Interstellar Fluid Hero
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
baseColor | [number, number, number] | [0.05, 0.05, 0.2] | RGB array 0-1 for base color (Deep Space Blue). |
glowColor | [number, number, number] | [0.8, 0.4, 1.0] | RGB array 0-1 for glow color (Nebula Violet). |
dissipation | number | 0.97 | How fast the gas fades (0.95 - 0.99). |
velocityDissipation | number | 0.98 | How fast movement stops. |
interactive | boolean | true | Enable mouse interaction. |
Related Components
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.
Ameoba Cyber Hero
Soft matte fluid motion background with subtle mouse lens effects. Modern Swiss-style aesthetic with frosted grain texture.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs it heavy on the GPU?
This component is built with OGL (a lightweight WebGL library) and is highly optimized for performance, though it's best to test on lower-end devices.
QCan I change the nebula colors?
Yes, you can fully customize the `baseColor` and `glowColor` using RGB arrays (0 to 1) to match your brand's palette.
QDoes it work as a static background?
While intended to be dynamic, you can disable `interactive` to create a steady, hypnotic drift that adds texture without direct user control.