75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
// app/TechBackdrop.tsx
|
|
export default function TechBackdrop() {
|
|
return (
|
|
<svg
|
|
className="w-full h-full"
|
|
viewBox="0 0 1440 900"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
>
|
|
<defs>
|
|
{/* Keep only a very subtle vignette, no bright white */}
|
|
<radialGradient id="bg-vignette" cx="50%" cy="0%" r="80%">
|
|
<stop offset="0%" stopColor="#02061700" /> {/* transparent */}
|
|
<stop offset="60%" stopColor="#02061720" /> {/* very soft */}
|
|
<stop offset="100%" stopColor="#020617ff" /> {/* solid base */}
|
|
</radialGradient>
|
|
|
|
<pattern
|
|
id="grid-lines"
|
|
x="0"
|
|
y="0"
|
|
width="120"
|
|
height="120"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path
|
|
d="M0 0 H120"
|
|
stroke="rgba(148,163,184,0.10)"
|
|
strokeWidth="0.4"
|
|
strokeDasharray="2 14"
|
|
/>
|
|
</pattern>
|
|
|
|
<style>
|
|
{`
|
|
@keyframes draw-line-soft {
|
|
0% { stroke-dashoffset: 520; opacity: 0.0; }
|
|
30% { stroke-dashoffset: 0; opacity: 0.25; }
|
|
70% { stroke-dashoffset: 0; opacity: 0.25; }
|
|
100% { stroke-dashoffset: -520; opacity: 0.0; }
|
|
}
|
|
`}
|
|
</style>
|
|
</defs>
|
|
|
|
{/* Flat dark blue base */}
|
|
<rect width="1440" height="900" fill="#020617" />
|
|
{/* Very subtle vignette over it */}
|
|
<rect width="1440" height="900" fill="url(#bg-vignette)" />
|
|
|
|
{/* Faint lines */}
|
|
<rect
|
|
x="-200"
|
|
y="160"
|
|
width="1800"
|
|
height="600"
|
|
fill="url(#grid-lines)"
|
|
opacity="0.22"
|
|
/>
|
|
|
|
{/* Soft trajectory line, toned down */}
|
|
<path
|
|
d="M-120 760 Q 540 420 1200 520 T 1680 260"
|
|
fill="none"
|
|
stroke="rgba(148,163,184,0.28)"
|
|
strokeWidth="0.7"
|
|
strokeDasharray="520 520"
|
|
strokeDashoffset="520"
|
|
style={{
|
|
animation: 'draw-line-soft 26s ease-in-out infinite',
|
|
}}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|