Noise
Noisy, textured landing page with grain effects and organic imperfections.
Main Features of Noise
How to Use Noise in Next.js
Installation Guide for Noise
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
noiseIntensity | number | 1 | Intensity of noise/grain effect (0-2). |
primaryColor | string | #1a1a1a | Primary text/background color. |
enableGrain | boolean | true | Enable grain texture overlay. |
grainOpacity | number | 0.1 | Opacity of grain effect (0-1). |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the grain real?
Yes, the component generates a dynamic SVG or Canvas grain overlay (`enableGrain`) that adds an organic texture to the entire page surface.
QCan I adjust the intensity?
Yes, the `noiseIntensity` and `grainOpacity` props allow you to control how 'thick' and 'visible' the atmospheric noise appears.
QDoes it affect performance?
The grain system is highly optimized and localized to secondary layers to ensure smooth scrolling and interaction even on medium-spec devices.