Light Leak
Vintage warm light leak effect with animated color blobs and film grain.
Main Features of Light Leak
How to Use Light Leak in Next.js
Installation Guide for Light Leak
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 |
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 adjust the leak color?
Yes, you can fully customize the 3 independent leak sources to range from sunset orange to cool sunset blues.
QHow 'grainy' is the effect?
The grain intensity is adjustable via the `noiseOpacity` prop, allowing for a clean modern look or a heavy retro feel.
QIs it mobile responsive?
Yes, the leak positions and scales are responsive to ensure the 'glow' always hits the right spots on smaller screens.