92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export const TechBackground = () => {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
|
|
<div className="absolute inset-0 grid-pattern opacity-[0.15]" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
|
|
<div className="absolute inset-0 grid-pattern opacity-[0.15]" />
|
|
|
|
{/* Animated Tech Lines */}
|
|
{[...Array(5)].map((_, i) => (
|
|
<motion.div
|
|
key={`line-${i}`}
|
|
initial={{ x: '-100%', opacity: 0 }}
|
|
animate={{ x: '100%', opacity: [0, 0.4, 0] }}
|
|
transition={{
|
|
duration: 8 + i * 2,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
delay: i * 2
|
|
}}
|
|
className="absolute h-[2px] bg-gradient-to-r from-transparent via-accent/40 to-transparent w-full"
|
|
style={{ top: `${20 * (i + 1)}%` }}
|
|
/>
|
|
))}
|
|
|
|
{/* Floating Tech Squares */}
|
|
{[...Array(8)].map((_, i) => (
|
|
<motion.div
|
|
key={`square-${i}`}
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{
|
|
opacity: [0, 0.2, 0],
|
|
scale: [0, 1, 0],
|
|
rotate: [0, 90, 180],
|
|
x: [0, Math.random() * 200 - 100, 0],
|
|
y: [0, Math.random() * 200 - 100, 0]
|
|
}}
|
|
transition={{
|
|
duration: 8 + Math.random() * 4,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay: i * 2
|
|
}}
|
|
className="absolute w-8 h-8 border border-accent/10 rounded-sm"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{/* Pulsing Dots */}
|
|
{[...Array(15)].map((_, i) => (
|
|
<motion.div
|
|
key={`dot-${i}`}
|
|
animate={{
|
|
opacity: [0.1, 0.4, 0.1],
|
|
scale: [1, 1.5, 1]
|
|
}}
|
|
transition={{
|
|
duration: 3 + Math.random() * 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay: i * 0.5
|
|
}}
|
|
className="tech-dot"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|