Mesh Gradient

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function MeshGradient({ children }) {
6  return (
7    <div className="relative w-full h-full min-h-[400px] overflow-hidden rounded-2xl bg-[#000000]">
8      {/* Base mesh gradient background */}
9      <div 
10        className="absolute inset-0 opacity-80"
11        style={{
12          backgroundImage: `
13            radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
14            radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
15            radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%)
16          `
17        }}
18      />
19      
20      {/* Animated blob 1 */}
21      <motion.div
22        className="absolute w-[80%] h-[80%] top-[10%] left-[10%] rounded-full opacity-60 mix-blend-screen blur-[80px]"
23        style={{
24          background: "radial-gradient(circle, rgba(131,58,180,0.8) 0%, rgba(253,29,29,0) 70%)",
25        }}
26        animate={{
27          x: ["0%", "30%", "-20%", "0%"],
28          y: ["0%", "20%", "30%", "0%"],
29        }}
30        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
31      />
32
33      {/* Animated blob 2 */}
34      <motion.div
35        className="absolute w-[60%] h-[60%] top-[20%] right-[10%] rounded-full opacity-50 mix-blend-screen blur-[80px]"
36        style={{
37          background: "radial-gradient(circle, rgba(252,176,69,0.8) 0%, rgba(253,29,29,0) 70%)",
38        }}
39        animate={{
40          x: ["0%", "-40%", "10%", "0%"],
41          y: ["0%", "30%", "-20%", "0%"],
42        }}
43        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
44      />
45
46      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center p-8 backdrop-blur-[10px]">
47        {children || (
48          <div className="text-center">
49            <h2 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-white to-white/40 mb-2">
50              Mesh Gradient
51            </h2>
52            <p className="text-white/60">Fluid and immersive color mixing.</p>
53          </div>
54        )}
55      </div>
56    </div>
57  );
58}
59