LiquidFrame

"use client";

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

type LiquidFrameProps = {
  children: ReactNode;
  className?: string;
  /** Colours of the liquid, they flow round the frame. */
  colors?: string[];
  /** How far the liquid spills past the card, in pixels. */
  thickness?: number;
  /** Seconds for one full wobble. */
  duration?: number;
};

const SHAPES = [
  "42% 58% 63% 37% / 41% 44% 56% 59%",
  "58% 42% 38% 62% / 55% 38% 62% 45%",
  "38% 62% 55% 45% / 62% 58% 42% 38%",
  "42% 58% 63% 37% / 41% 44% 56% 59%",
];

/* LiquidFrame: a ring of colour wobbles and flows round the card like liquid. */
export function LiquidFrame({
  children,
  className = "rounded-2xl bg-[#120f22] p-6 text-white",
  colors = ["#a78bfa", "#5eead4", "#f0abfc"],
  thickness = 10,
  duration = 8,
}: LiquidFrameProps) {
  const reduce = useReducedMotion();
  const gradient = `conic-gradient(from 0deg, ${[...colors, colors[0]].join(", ")})`;

  return (
    <div className="relative isolate">
      <motion.div
        aria-hidden
        className="absolute -z-10 blur-[6px]"
        style={{ inset: -thickness, background: gradient, borderRadius: SHAPES[0] }}
        animate={reduce ? undefined : { borderRadius: SHAPES, rotate: [0, 360] }}
        transition={{
          borderRadius: { duration, repeat: Infinity, ease: "easeInOut" },
          rotate: { duration: duration * 2, repeat: Infinity, ease: "linear" },
        }}
      />
      <div className={`relative ${className}`}>{children}</div>
    </div>
  );
}