MeshBloom

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type MeshBloomProps = {
  children?: ReactNode;
  className?: string;
  /** Four colours, one per corner. */
  colors?: [string, string, string, string];
  background?: string;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

const CORNERS = ["left-0 top-0", "right-0 top-0", "right-0 bottom-0", "left-0 bottom-0"];

/* MeshBloom: four colour blooms breathe in the corners while the whole mesh turns slowly. */
export function MeshBloom({
  children,
  className = "",
  colors = ["#a78bfa", "#ff5fa2", "#38bdf8", "#34d399"],
  background = "#0a0814",
  speed = 1,
}: MeshBloomProps) {
  const reduce = useReducedMotion();

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      <motion.div
        aria-hidden
        className="absolute -inset-1/4"
        animate={reduce ? undefined : { rotate: 360 }}
        transition={{ duration: 60 / speed, repeat: Infinity, ease: "linear" }}
      >
        {colors.map((c, i) => (
          <motion.div
            key={i}
            className={`absolute h-3/5 w-3/5 rounded-full opacity-70 blur-[60px] ${CORNERS[i]}`}
            style={{ background: c }}
            animate={reduce ? undefined : { scale: [1, 1.3, 1] }}
            transition={{ duration: (9 + i * 2) / speed, repeat: Infinity, ease: "easeInOut", delay: i * 0.8 }}
          />
        ))}
      </motion.div>
      <div className="relative h-full">{children}</div>
    </div>
  );
}