Velvet Noir
Soft editorial blur with animated color blobs creating a luxurious velvet texture.
Main Features of Velvet Noir
How to Use Velvet Noir in Next.js
Installation Guide for Velvet Noir
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 |
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
QWhy is it called 'Velvet Noir'?
Because it focuses on high-contrast, deep blacks combined with soft ruby and indigo tones that mimic the texture of velvet.
QCan I add more blobs?
The component is optimized for 3 high-impact blobs, but more can be added by extending the Framer Motion animation array.
QDoes it include a noise layer?
Yes, it uses a custom SVG noise filter to achieve that grainy, editorial photography texture.