Сетчатый градиент

import { AnimatedMeshGradient } from "@/shared/components/organisms/mesh-gradient";
import * as React from "react";
import { useMemo } from "react";

import { hexToRgb, useCustomize } from "~/showcase";

const COLORS = [
  { hex: "#ffd12e", rgb: { r: 1.0, g: 0.82, b: 0.18 } },
  { hex: "#ff7a1f", rgb: { r: 1.0, g: 0.48, b: 0.12 } },
  { hex: "#f2402e", rgb: { r: 0.95, g: 0.25, b: 0.18 } },
  { hex: "#59141f", rgb: { r: 0.35, g: 0.08, b: 0.12 } },
];

const CUSTOMIZE = [
  { key: "speed", label: "Скорость", type: "slider", min: 0, max: 3, step: 0.1, default: 1 },
  { key: "contrast", label: "Контраст", type: "slider", min: 0, max: 2, step: 0.05, default: 0.5 },
  { key: "noise", label: "Зерно", type: "slider", min: 0, max: 1, step: 0.05, default: 1 },
  { key: "blur", label: "Размытие", type: "slider", min: 0, max: 1, step: 0.05, default: 1 },
  { key: "color1", label: "Цвет 1", type: "color", default: COLORS[0].hex },
  { key: "color2", label: "Цвет 2", type: "color", default: COLORS[1].hex },
  { key: "color3", label: "Цвет 3", type: "color", default: COLORS[2].hex },
  { key: "color4", label: "Цвет 4", type: "color", default: COLORS[3].hex },
  { key: "animated", label: "Анимация", type: "toggle", default: true },
] as const;

export default function App() {
  const custom = useCustomize(CUSTOMIZE);
  const { color1, color2, color3, color4 } = custom;

  const colors = useMemo(
    () =>
      [color1, color2, color3, color4].map((hex, index) =>
        hex === COLORS[index].hex ? COLORS[index].rgb : hexToRgb(hex),
      ),
    [color1, color2, color3, color4],
  );

  return (
    <AnimatedMeshGradient
      speed={custom.speed}
      contrast={custom.contrast}
      noise={custom.noise}
      colors={colors}
      blur={custom.blur}
      animated={custom.animated}
    />
  );
}