Backgrounds & Visuals
Velvet Noir
Soft editorial blur with animated color blobs creating a luxurious velvet texture.
blurvelvetnoirsofteditorial
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #0a0a0a | Background color |
blob1Color | string | rgba(190, 18, 60, 0.4) | First blob color |
blob1Size | string | 600px | First blob size |
blob1Blur | string | 120px | First blob blur |
blob1Opacity | number[] | [0.4, 0.6, 0.4] | First blob opacity animation values |
blob1Scale | number[] | [1, 1.2, 1] | First blob scale animation values |
blob1Duration | number | 8 | First blob animation duration |
blob2Color | string | rgba(67, 56, 202, 0.3) | Second blob color |
blob2Size | string | 500px | Second blob size |
blob2Blur | string | 100px | Second blob blur |
blob2Opacity | number | 1 | Second blob opacity |
blob2TranslateX | number[] | [0, -50, 0] | Second blob X translation |
blob2TranslateY | number[] | [0, 50, 0] | Second blob Y translation |
blob2Duration | number | 10 | Second blob animation duration |
blob3Color | string | rgba(162, 28, 175, 0.3) | Third blob color |
blob3Size | string | 500px | Third blob size |
blob3Blur | string | 100px | Third blob blur |
blob3Opacity | number | 1 | Third blob opacity |
blob3TranslateX | number[] | [0, 50, 0] | Third blob X translation |
blob3TranslateY | number[] | [0, -50, 0] | Third blob Y translation |
blob3Duration | number | 12 | Third blob animation duration |
gradientFrom | string | rgba(0, 0, 0, 0.6) | Gradient start color |
gradientTo | string | transparent | Gradient end color |
noiseOpacity | number | 0.3 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Velvet | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |