fluid-morph-bg

1"use client";
2 
3import React from "react";
4import { motion } from "framer-motion";
5import { cn } from "@/lib/utils";
6 
7interface FluidMorphBgProps {
8  /**
9   * Additional CSS classes for the container.
10   */
11  className?: string;
12  /**
13   * The duration of the morphing animation in seconds.
14   */
15  duration?: number;
16  /**
17   * The base color palette to use for the shapes.
18   * Array of hex colors for each path.
19   */
20  colors?: string[];
21  /**
22   * Optional background color for the scene container.
23   */
24  backgroundColor?: string;
25}
26 
27export function FluidMorphBg({
28  className,
29  duration = 4,
30  colors = [
31    "#4f4fea",
32    "#0c27cf",
33    "#13269c",
34    "#242468",
35    "#2648e6",
36    "#2c31b0",
37    "#262689",
38  ],
39  backgroundColor = "#282886",
40}: FluidMorphBgProps) {
41  // SVG viewbox dimensions
42  const viewBox = "0 0 1440 800";
43 
44  // Data for each morphing path
45  // path[0]: original "d", path[1]: "pathdata:id" (target morph shape)
46  const pathsData = [
47    [
48      "M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z",
49      "M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1576,704.7 1517,625.7 1459,514.7 1418,419.4 1430,288.5 1382,187 1349,116.3 1296,54.47 1240,0.3429 1205,-33.51 1120,-83.59 1120,-83.59 1120,-83.59 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z",
50    ],
51    [
52      "M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z",
53      "M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1349,460.4 1243,260.6 1199,176.6 1145,96.92 1083,24.95 1050,-12.63 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z",
54    ],
55    [
56// … truncated