Analog Film
Cinematic 35mm film grain with moving grain layer and gradient spotlights.
Main Features of Analog Film
How to Use Analog Film in Next.js
Installation Guide for Analog Film
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #1a1a1a | Background color |
gradientFrom | string | #000000 | Gradient start color |
gradientVia | string | #1a1a1a | Gradient middle color |
gradientTo | string | #000000 | Gradient end color |
gradientOpacity | number | 0.8 | Gradient opacity |
blob1Color | string | #fbbf24 | First blob color |
blob1Size | string | 32rem | First blob size |
blob1Blur | string | 120px | First blob blur |
blob1Opacity | number | 0.3 | First blob opacity |
blob2Color | string | #dc2626 | Second blob color |
blob2Size | string | 28rem | Second blob size |
blob2Blur | string | 100px | Second blob blur |
blob2Opacity | number | 0.25 | Second blob opacity |
noiseOpacity | number | 0.4 | Noise overlay opacity |
noiseBaseFrequency | string | 1.2 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
noiseAnimationDuration | number | 0.05 | Noise animation duration |
text | string | Film | Text label |
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
QIs the grain animated?
Yes, the grain layer moves continuously at a high frequency (controlled by `noiseAnimationDuration`) to mimic the rapid flickering of real film stock.
QCan I change the spotlight colors?
Absolutely, you can customize both `blob1Color` and `blob2Color` to create different types of film light leaks (e.g., warm amber or cool cyan).
QDoes it work as a full-page backdrop?
Yes, it is designed to be highly non-distracting while providing a rich, multi-layered background that adds perceived depth to your interface.