Backgrounds & Visuals
Hyper Mesh Nebula
Nebula-like gradient with animated color blobs creating a hyper mesh effect.
gradientnebulameshhyperanimated
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 |