Initial commit
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function ScanlineOverlay() {
|
||||
return (
|
||||
<div className="pointer-events-none fixed inset-0 z-1 overflow-hidden">
|
||||
<div className="absolute inset-0 scanline-bg opacity-40" />
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-x-0 h-32"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(180deg, transparent 0%, rgba(167, 139, 250, 0.06) 50%, transparent 100%)",
|
||||
}}
|
||||
animate={{ y: ["-10vh", "110vh"] }}
|
||||
transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.015] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
||||
backgroundSize: "200px 200px",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 vignette" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user