css-mesh/dist/index.d.ts

Beautiful CSS-based animated mesh gradients for React - 34 themes, 3D lighting, drop shadows, mouse tracking, no WebGL required

import { default as default_2 } from 'react';
import { ThemePack as ThemePack_2 } from '..';

export declare const ALL_THEMES: ThemeCollection;

export declare interface AnimationConfig {
    type: AnimationType;
    duration: number;
    delay?: number;
    easing?: string;
    intensity?: number;
}

export declare interface AnimationDefinition {
    name: string;
    keyframes: AnimationKeyframe[];
    duration: number;
    easing: string;
    iterationCount: string;
}

export declare interface AnimationKeyframe {
    percent: number;
    transform: string;
}

export declare const ANIMATIONS: Record<AnimationType, AnimationDefinition | null>;

export declare interface AnimationStyles extends default_2.CSSProperties {
    animation?: string;
    animationDelay?: string;
    animationDuration?: string;
    animationTimingFunction?: string;
}

export declare type AnimationType = 'none' | 'float' | 'pulse' | 'wave' | 'rotation' | 'orbit' | 'morph';

export declare interface BackgroundConfig {
    shapes: ShapeConfig[];
    backgroundColor?: string;
    containerStyle?: default_2.CSSProperties;
}

export declare const BASE_THEMES: ThemeCollection;

export declare const CONTAINER_ANIMATIONS: Record<ContainerAnimationType, string | null>;

declare interface ContainerAnimationConfig {
    type: ContainerAnimationType;
    duration: number;
    easing?: string;
}

declare type ContainerAnimationType = 'none' | 'hue' | 'rotation' | 'hue-rotation' | 'drop-shadow';

export declare const DARK_THEMES: string[];

export declare const DRAMATIC_THEMES: ThemeCollection;

declare interface DropShadow {
    enabled: boolean;
    size?: number;
    opacity?: number;
    direction?: {
        x: number;
        y: number;
    };
}

export declare type EllipseConfig = ShapeConfig;

export declare const FLOAT_ANIMATION: AnimationDefinition;

export declare const generateAnimationKeyframes: (type: AnimationType, intensity?: number) => string;

export declare const generateContainerAnimationKeyframes: (type: ContainerAnimationType) => string;

export declare const getAnimation: (type: AnimationType) => AnimationDefinition | null;

export declare const getAnimationStyles: (type: AnimationType, index?: number, configuredDuration?: number) => React.CSSProperties;

export declare const getContainerAnimationStyles: (type: ContainerAnimationType, duration?: number) => React.CSSProperties;

export declare const getTheme: (themeName: string) => ThemePack_2;

export declare const isLightTheme: (themeName: string) => boolean;

export declare const KEYFRAME_GENERATORS: Record<string, (intensity?: number) => string>;

export declare const LIGHT_THEMES: string[];

declare interface Lighting3D {
    enabled: boolean;
    position?: {
        x: number;
        y: number;
    };
    intensity?: number;
}

export declare const MeshGradient: default_2.FC<MeshGradientProps>;

export declare interface MeshGradientProps {
    theme?: string;
    customConfig?: Partial<BackgroundConfig>;
    className?: string;
    style?: default_2.CSSProperties;
    children?: default_2.ReactNode;
    animated?: boolean;
    animationType?: AnimationType;
    animationConfig?: Partial<AnimationConfig>;
    containerAnimation?: ContainerAnimationType;
    containerAnimationConfig?: Partial<ContainerAnimationConfig>;
    mouseTracking?: Partial<MouseTrackingConfig>;
    visualEffects?: {
        saturation: number;
        contrast: number;
        brightness: number;
        hue: number;
    };
    onThemeChange?: (themeName: string) => void;
    performance?: 'auto' | 'high' | 'low';
    shape?: 'background' | 'orb';
    size?: number | 'sm' | 'md' | 'lg';
    dropShadow?: number | boolean;
    dropShadowOpacity?: number;
    dropShadowDirection?: {
        x: number;
        y: number;
    };
    lighting3d?: {
        enabled: boolean;
        position?: {
            x: number;
            y: number;
        };
        intensity?: number;
    };
}

declare interface MouseTrackingConfig {
    enabled: boolean;
    mode: 'attract' | 'repel';
    intensity: number;
    radius: number;
}

export declare const ORBIT_ANIMATION: AnimationDefinition;

export declare const PULSE_ANIMATION: AnimationDefinition;

export declare const ROTATION_ANIMATION: AnimationDefinition;

declare interface ShapeConfig {
    id: string;
    width: number;
    height: number;
    x: number;
    y: number;
    gradient: string;
    blur: number;
    opacity?: number;
    zIndex?: number;
    shape?: ShapeType;
    shapeProps?: ShapeProperties;
}

declare interface ShapeProperties {
    borderRadius?: number | string;
}

declare type ShapeType = 'ellipse' | 'rectangle';

export declare const THEME_NAMES: string[];

export declare interface ThemeCollection {
    [themeName: string]: ThemePack;
}

export declare interface ThemePack {
    backgroundColor: string;
    shapes: ShapeConfig[];
    visualEffects?: VisualEffects;
    lighting3d?: Lighting3D;
    dropShadow?: DropShadow;
}

export declare const VERSION = "0.7.1";

declare interface VisualEffects {
    saturation?: number;
    contrast?: number;
    brightness?: number;
    hue?: number;
}

export declare const WAVE_ANIMATION: AnimationDefinition;

export { }