Зернистый градиент

import React, { useMemo } from "react";
import { StyleSheet, View } from "react-native";
import { GrainyGradient } from "@/shared/components/organisms/grainy-gradient";
import { useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "color1", label: "Цвет 1", type: "color", default: "#5b0bb5" },
  { key: "color2", label: "Цвет 2", type: "color", default: "#7c3aed" },
  { key: "color3", label: "Цвет 3", type: "color", default: "#fb923c" },
  { key: "color4", label: "Цвет 4", type: "color", default: "#db2777" },
  { key: "speed", label: "Скорость", type: "slider", min: 0, max: 8, step: 0.1, default: 2.9 },
  { key: "amplitude", label: "Амплитуда", type: "slider", min: 0, max: 0.5, step: 0.01, default: 0.1 },
  { key: "brightness", label: "Яркость", type: "slider", min: -0.5, max: 0.5, step: 0.01, default: 0 },
  { key: "grain", label: "Зерно", type: "toggle", default: true },
  { key: "intensity", label: "Сила зерна", type: "slider", min: 0, max: 0.5, step: 0.002, default: 0.112 },
  { key: "size", label: "Размер зерна", type: "slider", min: 0.5, max: 6, step: 0.1, default: 1.9 },
  { key: "animated", label: "Анимация", type: "toggle", default: true },
] as const;

export default function App(): React.ReactNode &
  React.JSX.Element &
  React.ReactElement {
  const custom = useCustomize(CUSTOMIZE);
  const { color1, color2, color3, color4 } = custom;
  const colors = useMemo<[string, string, string, string]>(
    () => [color1, color2, color3, color4],
    [color1, color2, color3, color4],
  );

  return (
    <View style={stylez.container}>
      <GrainyGradient
        colors={colors}
        speed={custom.speed}
        amplitude={custom.amplitude}
        brightness={custom.brightness}
        enabled={custom.grain}
        intensity={custom.intensity}
        size={custom.size}
        animated={custom.animated}
      />
    </View>
  );
}

const stylez = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});