-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathGrainOverlay.jsx
More file actions
22 lines (18 loc) · 1.16 KB
/
GrainOverlay.jsx
File metadata and controls
22 lines (18 loc) · 1.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
const GrainOverlay = () => (
<div className="fixed inset-0 pointer-events-none z-0">
{/* Noise Texture */}
<div
className="absolute inset-0 w-full h-full opacity-[0.15] mix-blend-multiply"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
}}
/>
{/* Subtle Dirt Specks (Randomly positioned using gradients) */}
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(#333_1px,transparent_1px)] [background-size:400px_400px]" />
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(#222_1px,transparent_1px)] [background-size:600px_600px] [background-position:100px_100px]" />
{/* Vignette for old paper look */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_50%,rgba(60,50,40,0.1)_100%)] mix-blend-multiply" />
</div>
);
export default GrainOverlay;