Silken Mesh
Modern fluid blur with soft color gradients creating a silken texture.
Main Features of Silken Mesh
How to Use Silken Mesh in Next.js
Installation Guide for Silken Mesh
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #f8fafc | Background color |
blurAmount | string | 80px | Blur amount |
gradientFrom | string | #bfdbfe | Gradient start color |
gradientVia | string | #c7d2fe | Gradient middle color |
gradientTo | string | #ddd6fe | Gradient end color |
gradientOpacity | number | 0.8 | Gradient opacity |
gradientScale | number[] | [1, 1.05, 1] | Gradient scale animation |
gradientDuration | number | 10 | Gradient animation duration |
blob1Color | string | #7dd3fc | First blob color |
blob1Size | string | 50% | First blob size |
blob1Opacity | number | 0.6 | First blob opacity |
blob1TranslateX | number[] | [0, 100, 0] | First blob X translation |
blob1TranslateY | number[] | [0, 50, 0] | First blob Y translation |
blob1Duration | number | 14 | First blob animation duration |
blob2Color | string | #f9a8d4 | Second blob color |
blob2Size | string | 50% | Second blob size |
blob2Opacity | number | 0.6 | Second blob opacity |
blob2TranslateX | number[] | [0, -100, 0] | Second blob X translation |
blob2TranslateY | number[] | [0, -50, 0] | Second blob Y translation |
blob2Duration | number | 16 | Second blob animation duration |
overlayColor | string | rgba(255, 255, 255, 0.4) | Overlay color |
overlayBlur | string | xl | Overlay blur |
noiseOpacity | number | 0.2 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Silk | 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
QCan I use it for dark mode?
Yes, simply swap the background and blob colors to darker tones like slate-900 or indigo-950 for a stunning dark mesh.
QHow fluid is the movement?
The blobs follow a smooth, continuous path using Framer Motion's spring and loop animations for a realistic silken feel.
QDoes it support custom shapes?
The 'mesh' is created via overlapping blurred blobs, which can be resized or repositioned to create different flow patterns.