Hyper Mesh Nebula
Nebula-like gradient with animated color blobs creating a hyper mesh effect.
Main Features of Hyper Mesh Nebula
How to Use Hyper Mesh Nebula in Next.js
Installation Guide for Hyper Mesh Nebula
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #0a0a0a | Background color |
gradientFrom | string | #312e81 | Gradient start color |
gradientVia | string | #581c87 | Gradient middle color |
gradientTo | string | #000000 | Gradient end color |
gradientOpacity | number | 0.8 | Gradient opacity |
blobCount | number | 6 | Number of blobs |
blobColor1 | string | #4f46e5 | First blob color |
blobColor2 | string | #db2777 | Second blob color |
blobMinSize | number | 200 | Minimum blob size |
blobMaxSize | number | 600 | Maximum blob size |
blobBlur | string | 80px | Blob blur amount |
blobMinDuration | number | 10 | Minimum blob animation duration |
blobMaxDuration | number | 20 | Maximum blob animation duration |
blobTranslateRange | number | 50 | Blob translation range |
blobScale | number[] | [1, 1.2, 1] | Blob scale animation |
grainOpacity | number | 0.12 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | Hyper Mesh | Title text |
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
QIs the grain necessary?
The grain prevents color banding in deep gradients and adds a film-like texture, but it can be reduced via the `grainOpacity` prop.
QCan I use different colors?
Yes, you can fully customize the background, main gradient, and individual blob colors to create a unique nebula.
QHow fast do the blobs move?
The speed is randomized within the range defined by `blobMinDuration` and `blobMaxDuration` for a more natural, non-repetitive feel.