Cyber Grid

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export default function CyberGrid({ className }) {
7  return (
8    <div className={cn("relative w-full h-[400px] overflow-hidden bg-[#050510] rounded-2xl border border-[#2a2a40]", className)}>
9      {/* Grid Pattern */}
10      <div 
11        className="absolute inset-0 opacity-20"
12        style={{
13          backgroundImage: `
14            linear-gradient(to right, #00f0ff 1px, transparent 1px),
15            linear-gradient(to bottom, #00f0ff 1px, transparent 1px)
16          `,
17          backgroundSize: '40px 40px',
18          transform: 'perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px)',
19          transformOrigin: 'top center'
20        }}
21      />
22      
23      {/* Animated Scanline */}
24      <motion.div
25        className="absolute inset-x-0 h-1 bg-[#00f0ff] opacity-50 blur-[2px]"
26        animate={{
27          top: ["0%", "100%"]
28        }}
29        transition={{
30          duration: 3,
31          repeat: Infinity,
32          ease: "linear"
33        }}
34        style={{
35          boxShadow: '0 0 20px #00f0ff, 0 0 40px #00f0ff'
36        }}
37      />
38      
39      {/* Vignette Overlay */}
40      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_20%,#050510_100%)] pointer-events-none" />
41      
42      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center pointer-events-none">
43        <h2 className="text-4xl font-mono font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600 mb-2" style={{ textShadow: '0 0 10px rgba(0,240,255,0.5)' }}>
44          SYSTEM_ONLINE
45        </h2>
46        <div className="flex gap-2 text-xs font-mono text-cyan-500/70">
47          <span className="animate-pulse">_</span>
48          <span>INIT_SEQUENCE</span>
49          <span>[OK]</span>
50        </div>
51      </div>
52    </div>
53  );
54}
55