Particle Mesh Background

1export default function ParticleMeshBackground() {
2  return (
3    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#09090b]">
4      {/* Animated gradient orbs */}
5      <div className="pointer-events-none absolute inset-0">
6        <div
7          className="absolute h-[500px] w-[500px] rounded-full opacity-30 blur-[100px]"
8          style={{
9            background: "radial-gradient(circle, #f97316 0%, transparent 70%)",
10            left: "20%",
11            top: "30%",
12            animation: "meshFloat1 15s ease-in-out infinite",
13          }}
14        />
15        <div
16          className="absolute h-[400px] w-[400px] rounded-full opacity-20 blur-[100px]"
17          style={{
18            background: "radial-gradient(circle, #dc2626 0%, transparent 70%)",
19            right: "20%",
20            bottom: "20%",
21            animation: "meshFloat2 18s ease-in-out infinite",
22          }}
23        />
24        <div
25          className="absolute h-[300px] w-[300px] rounded-full opacity-25 blur-[80px]"
26          style={{
27            background: "radial-gradient(circle, #f59e0b 0%, transparent 70%)",
28            left: "50%",
29            top: "10%",
30            animation: "meshFloat3 12s ease-in-out infinite",
31          }}
32        />
33      </div>
34 
35      {/* Content */}
36      <div className="relative z-10 text-center">
37        <h1 className="text-5xl font-bold tracking-tight text-white">Your content here</h1>
38        <p className="mt-3 text-lg text-zinc-400">This is a CSS-only animated mesh background</p>
39      </div>
40 
41      <style>{`
42        @keyframes meshFloat1 {
43          0%, 100% { transform: translate(0, 0) scale(1); }
44          33% { transform: translate(60px, -40px) scale(1.1); }
45          66% { transform: translate(-40px, 30px) scale(0.95); }
46        }
47        @keyframes meshFloat2 {
48          0%, 100% { transform: translate(0, 0) scale(1); }
49          33% { transform: translate(-50px, 30px) scale(1.05); }
50          66% { transform: translate(40px, -50px) scale(0.9); }
51        }
52        @keyframes meshFloat3 {
53          0%, 100% { transform: translate(-50%, 0) scale(1); }
54          50% { transform: translate(-50%, 40px) scale(1.15); }
55        }
56      `}</style>
57    </div>
58  );
59}