Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Main Features of Interstellar Background Hero
How to Use Interstellar Background Hero in Next.js
Installation Guide for Interstellar Background Hero
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
baseColor | [number, number, number] | [0.1, 0.4, 0.9] | RGB 0-1 for base color (Deep Electric Blue). |
speed | number | 1.0 | Animation speed (0.0 - 5.0). |
density | number | 1.2 | Nebula density (0.5 - 2.0). |
brightness | number | 1.0 | Overall brightness (0.0 - 2.0). |
interactive | boolean | true | Enable mouse interaction. |
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.
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
QCan I adjust the tunnel speed?
Yes, the `speed` prop allows you to range from a slow, drifting nebula to a high-speed warp tunnel effect.
QWhat is the 'density' prop for?
It controls how thick the gas clouds and star clusters appear within the tunnel simulation.
QIs the space distortion interactive?
Yes, when `interactive` is true, the tunnel perspective shifts slightly in response to mouse movement for added depth.