@blur-ui/mesh-gradient

import * as react from 'react'; import { CanvasHTMLAttributes } from 'react'; declare const GradientColors: { readonly green: { readonly color1: "#043D5D"; readonly color2: "#032E46"; readonly color3: "#23B684"; readonly color4: "#0F595E"; }; readonly peach: { readonly color1: "#FE6860"; readonly color2: "#FE8A71"; readonly color3: "#D9BBAE"; readonly color4: "#F3C9BF"; }; readonly sky: { readonly color1: "#c3e4ff"; readonly color2: "#6ec3f4"; readonly color3: "#eae2ff"; readonly color4: "#b9beff"; }; readonly purple: { readonly color1: "#ba53df"; readonly color2: "#7948ea"; readonly color3: "#6b03b0"; readonly color4: "#210368"; }; readonly yellow: { readonly color1: "#ffa061"; readonly color2: "#ffc370"; readonly color3: "#d9ceaf"; readonly color4: "#f2ecbf"; }; readonly lime: { readonly color1: "#d5ff61"; readonly color2: "#b0ff70"; readonly color3: "#d0d9af"; readonly color4: "#dbf2bf"; }; readonly sunrise: { readonly color1: "#8a519a"; readonly color2: "#6101c1"; readonly color3: "#e24097"; readonly color4: "#f3121d"; }; readonly oceanic: { readonly color1: "#005377"; readonly color2: "#00A8E8"; readonly color3: "#FFFFFF"; readonly color4: "#00A8E8"; }; readonly twilight: { readonly color1: "#2c3e50"; readonly color2: "#4ca1af"; readonly color3: "#c94b4b"; readonly color4: "#e96443"; }; readonly forest: { readonly color1: "#0B486B"; readonly color2: "#F56217"; readonly color3: "#5BC0BE"; readonly color4: "#6FB98F"; }; readonly ember: { readonly color1: "#FF4E50"; readonly color2: "#F9D423"; readonly color3: "#EDE574"; readonly color4: "#E1F5C4"; }; readonly sunset: { readonly color1: "#ff7e5f"; readonly color2: "#feb47b"; readonly color3: "#ff9a8b"; readonly color4: "#ff6a88"; }; readonly midnight: { readonly color1: "#2c3e50"; readonly color2: "#4ca1af"; readonly color3: "#c94b4b"; readonly color4: "#e96443"; }; readonly coral: { readonly color1: "#ff6f61"; readonly color2: "#d7263d"; readonly color3: "#3f88c5"; readonly color4: "#1b1b2f"; }; readonly lavender: { readonly color1: "#c3aed6"; readonly color2: "#a28fd0"; readonly color3: "#8668c7"; readonly color4: "#654ba5"; }; readonly mint: { readonly color1: "#3eb489"; readonly color2: "#3eb489"; readonly color3: "#38ef7d"; readonly color4: "#11998e"; }; readonly dusk: { readonly color1: "#141e30"; readonly color2: "#243b55"; readonly color3: "#302b63"; readonly color4: "#0f0c29"; }; readonly aurora: { readonly color1: "#00c6ff"; readonly color2: "#0072ff"; readonly color3: "#00b09b"; readonly color4: "#96c93d"; }; readonly berry: { readonly color1: "#ff6f91"; readonly color2: "#ff9671"; readonly color3: "#ffc75f"; readonly color4: "#f9f871"; }; readonly teal: { readonly color1: "#008080"; readonly color2: "#00b3b3"; readonly color3: "#00cccc"; readonly color4: "#33ffff"; }; readonly sunsetBlaze: { readonly color1: "#FF7E5F"; readonly color2: "#FD3A69"; readonly color3: "#FF6A88"; readonly color4: "#FF99AC"; }; readonly oceanDream: { readonly color1: "#00B4DB"; readonly color2: "#0083B0"; readonly color3: "#00C6FF"; readonly color4: "#0072FF"; }; readonly twilightPurple: { readonly color1: "#5D3FD3"; readonly color2: "#A389D4"; readonly color3: "#C5B0E3"; readonly color4: "#D9B3FF"; }; readonly forestMystic: { readonly color1: "#1B512D"; readonly color2: "#77B1A9"; readonly color3: "#B5EAEA"; readonly color4: "#E3FDFD"; }; readonly auroraBorealis: { readonly color1: "#00F260"; readonly color2: "#0575E6"; readonly color3: "#2AF598"; readonly color4: "#3A7BD5"; }; readonly desertSunset: { readonly color1: "#FFA17F"; readonly color2: "#00223E"; readonly color3: "#FC4A1A"; readonly color4: "#F7B733"; }; readonly emeraldGlow: { readonly color1: "#0F2027"; readonly color2: "#203A43"; readonly color3: "#2C5364"; readonly color4: "#4CA1AF"; }; readonly rubySunrise: { readonly color1: "#FF512F"; readonly color2: "#DD2476"; readonly color3: "#FF6A88"; readonly color4: "#FF99AC"; }; }; type GradientColors = keyof typeof GradientColors; type GradientPalette = { color1: string; color2: string; color3: string; color4: string; }; /** * The gradient colors. */ interface MeshGradientProps extends CanvasHTMLAttributes<HTMLCanvasElement> { /** * Custom gradient color palette. */ colors?: GradientPalette; /** * The gradient color theme. */ theme?: GradientColors; /** * If true, the gradient will be darkened. * @default false */ darken?: boolean; /** * If true, the gradient animation will pause. * @default false */ isPaused?: boolean; /** * The opacity of the gradient. * @default 1 */ opacity?: number; /** * The duration of the gradient animation in milliseconds. * @default 1000 */ animationDuration?: number; /** * The seed for gradient animation. * @default 5000 */ seed?: number; /** * The ref for the canvas element. */ ref?: React.Ref<HTMLCanvasElement>; } declare const MeshGradient: react.ForwardRefExoticComponent<Omit<MeshGradientProps, "ref"> & react.RefAttributes<HTMLCanvasElement>>; declare class Gradient { [x: string]: any; constructor({ seed, width, height }: { seed?: number; width?: number; height?: number; }); connect(): Promise<void>; disconnect(): void; initMaterial(): any; initMesh(): void; shouldSkipFrame(): true; updateFrequency(e: any): void; toggleColor(index: any): void; showGradientLegend(): void; hideGradientLegend(): void; init(): void; waitForCssVars(): any; initGradientColors(): void; } export { Gradient, GradientColors as GradientColorTitles, GradientColors, type GradientPalette, MeshGradient, type MeshGradientProps };