Backgrounds & Visuals
Light Leak
Vintage warm light leak effect with animated color blobs and film grain.
blurlightleakvintagewarm
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #1c1917 | Background color |
leak1Color | string | #f97316 | First leak color |
leak1Size | string | 70% | First leak size |
leak1Blur | string | 150px | First leak blur |
leak1Opacity | number | 0.4 | First leak opacity |
leak1Position | string | -top-[20%] -left-[10%] | First leak position |
leak1Scale | number[] | [1, 1.1, 1] | First leak scale animation |
leak1Rotate | number[] | [0, 10, 0] | First leak rotation animation |
leak1Duration | number | 15 | First leak animation duration |
leak2Color | string | #dc2626 | Second leak color |
leak2Size | string | 60% | Second leak size |
leak2Blur | string | 180px | Second leak blur |
leak2Opacity | number | 0.3 | Second leak opacity |
leak2Position | string | top-[40%] -right-[20%] | Second leak position |
leak2Scale | number[] | [1, 1.2, 1] | Second leak scale animation |
leak2TranslateX | number[] | [0, -50, 0] | Second leak X translation |
leak2Duration | number | 20 | Second leak animation duration |
leak3Color | string | #ca8a04 | Third leak color |
leak3Size | string | 50% | Third leak size |
leak3Blur | string | 120px | Third leak blur |
leak3Opacity | number | 0.2 | Third leak opacity |
leak3Position | string | bottom-[-20%] left-[20%] | Third leak position |
leak3TranslateY | number[] | [0, -30, 0] | Third leak Y translation |
leak3Duration | number | 12 | Third leak animation duration |
overlayColor | string | #292524 | Overlay color |
overlayOpacity | number | 0.2 | Overlay opacity |
noiseOpacity | number | 0.35 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Leak | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |