Premium Texture
A subtle SVG noise overlay adds an organic, tactile film-grain feel to combat the sterile look of pure digital interfaces.
Overview
A lightweight SVG noise filter that creates a subtle, tactile film grain effect over your entire page or specific sections. This is one of the most common techniques used by award-winning websites to combat the sterile look of pure digital interfaces.
Usage
import { NoiseOverlay } from "@/components/creative/noise-overlay"
<div className="relative w-full h-screen">
<NoiseOverlay opacity={0.05} />
{/* Content here */}
</div>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { NoiseOverlay } from "@/components/creative/noise-overlay";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { NoiseOverlay } from "@/components/creative/noise-overlay";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<NoiseOverlay
opacity{10}
baseFrequency{10}
numOctaves{10}
/>
</div>
);
}