32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|