@erosnicolau/animated-text/dist/types.d.ts

Advanced React animated text component with comprehensive animation effects

import { CSSProperties } from 'react';
export type AnimationType = 'none' | 'block' | 'phrases' | 'word' | 'typewriter' | 'word-typewriter';
export type CoordinationMode = 'parallel' | 'sequential' | 'cascade' | 'wave';
export type ReduceMotionMode = 'respect' | 'ignore' | 'simplified';
export interface ChildConfig {
    id: string;
    animation: string;
    startDelay: number;
    estimatedDuration: number;
}
export interface TimingConfig {
    groupStartDelay: number;
    childDelay: number;
    staggerDelay: number;
    coordinationMode: CoordinationMode;
}
export interface GroupCallbacks {
    onGroupStart?: () => void;
    onGroupComplete?: () => void;
    onChildStart?: (childId: string) => void;
    onChildComplete?: (childId: string) => void;
}
export interface AnimatedTextGroupContextValue {
    groupId: string;
    isGroupActive: boolean;
    groupReplayKey: number;
    registerChild: (childId: string, config: ChildConfig) => () => void;
    getChildTiming: (childId: string) => TimingConfig;
    coordinationMode: CoordinationMode;
    groupStartDelay: number;
    staggerDelay: number;
    groupEasing?: AnimationEasing;
    notifyChildStart: (childId: string) => void;
    notifyChildComplete: (childId: string) => void;
    debugMode: boolean;
    reduceMotionMode: ReduceMotionMode;
    isShowReplay: boolean;
    isShowConfig: boolean;
}
export interface AnimatedTextGroupProps extends GroupCallbacks {
    children: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    showReplay?: boolean;
    showConfig?: boolean;
    groupId?: string;
    groupStartDelay?: number;
    staggerDelay?: number;
    groupEasing?: AnimationEasing;
    coordinationMode?: CoordinationMode;
    reduceMotionMode?: ReduceMotionMode;
    intersectionConfig?: IntersectionObserverInit;
    batchUpdates?: boolean;
    debugMode?: boolean;
    highlightGroup?: boolean;
    logTiming?: boolean;
    dependencies?: string[];
}
export declare const DEFAULT_GROUP_CONFIG: {
    coordinationMode: CoordinationMode;
    groupStartDelay: number;
    staggerDelay: number;
    reduceMotionMode: ReduceMotionMode;
    batchUpdates: boolean;
    debugMode: boolean;
    highlightGroup: boolean;
    logTiming: boolean;
    showReplay: boolean;
    showConfig: boolean;
};
export type AnimationEffect = 'fadeIn' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'slide-up-left' | 'slide-up-right' | 'slide-down-left' | 'slide-down-right';
export interface ScaleEffect {
    type: 'scale';
    from: number;
    to: number;
}
export interface RotateEffect {
    type: 'rotate';
    from: number;
    to: number;
}
export interface SlideEffect {
    type: 'slide';
    x?: number;
    y?: number;
}
export interface ColorEffect {
    type: 'color';
    from: string;
    to: string;
    property?: 'color' | 'backgroundColor' | 'borderColor';
}
export interface BackgroundColorEffect {
    type: 'backgroundColor';
    from: string;
    to: string;
}
export interface TextShadowEffect {
    type: 'textShadow';
    from: string;
    to: string;
}
export interface FontSizeEffect {
    type: 'fontSize';
    from: string;
    to: string;
}
export interface LetterSpacingEffect {
    type: 'letterSpacing';
    from: string;
    to: string;
}
export interface PaddingEffect {
    type: 'padding';
    from: string;
    to: string;
}
export interface PaddingTopEffect {
    type: 'paddingTop';
    from: string;
    to: string;
}
export interface PaddingRightEffect {
    type: 'paddingRight';
    from: string;
    to: string;
}
export interface PaddingBottomEffect {
    type: 'paddingBottom';
    from: string;
    to: string;
}
export interface PaddingLeftEffect {
    type: 'paddingLeft';
    from: string;
    to: string;
}
export interface MarginEffect {
    type: 'margin';
    from: string;
    to: string;
}
export interface MarginTopEffect {
    type: 'marginTop';
    from: string;
    to: string;
}
export interface MarginRightEffect {
    type: 'marginRight';
    from: string;
    to: string;
}
export interface MarginBottomEffect {
    type: 'marginBottom';
    from: string;
    to: string;
}
export interface MarginLeftEffect {
    type: 'marginLeft';
    from: string;
    to: string;
}
export interface BorderRadiusEffect {
    type: 'borderRadius';
    from: string;
    to: string;
}
export interface BackdropFilterEffect {
    type: 'backdropFilter';
    from: string;
    to: string;
}
export interface BoxShadowEffect {
    type: 'boxShadow';
    from: string;
    to: string;
}
export interface FilterEffect {
    type: 'filter';
    from: string;
    to: string;
}
export interface LineHeightEffect {
    type: 'lineHeight';
    from: string;
    to: string;
}
export interface FontWeightEffect {
    type: 'fontWeight';
    from: string;
    to: string;
}
export interface BorderEffect {
    type: 'border';
    from: string;
    to: string;
}
export interface BorderWidthEffect {
    type: 'borderWidth';
    from: string;
    to: string;
}
export interface BorderColorEffect {
    type: 'borderColor';
    from: string;
    to: string;
}
export interface BorderStyleEffect {
    type: 'borderStyle';
    from: string;
    to: string;
}
export interface WidthEffect {
    type: 'width';
    from: string;
    to: string;
}
export interface MinWidthEffect {
    type: 'minWidth';
    from: string;
    to: string;
}
export interface MaxWidthEffect {
    type: 'maxWidth';
    from: string;
    to: string;
}
export interface HeightEffect {
    type: 'height';
    from: string;
    to: string;
}
export interface MinHeightEffect {
    type: 'minHeight';
    from: string;
    to: string;
}
export interface MaxHeightEffect {
    type: 'maxHeight';
    from: string;
    to: string;
}
export type ObjectEffect = ScaleEffect | RotateEffect | SlideEffect | ColorEffect | BackgroundColorEffect | TextShadowEffect | FontSizeEffect | LetterSpacingEffect | PaddingEffect | PaddingTopEffect | PaddingRightEffect | PaddingBottomEffect | PaddingLeftEffect | MarginEffect | MarginTopEffect | MarginRightEffect | MarginBottomEffect | MarginLeftEffect | BorderRadiusEffect | BackdropFilterEffect | BoxShadowEffect | FilterEffect | LineHeightEffect | FontWeightEffect | BorderEffect | BorderWidthEffect | BorderColorEffect | BorderStyleEffect | WidthEffect | MinWidthEffect | MaxWidthEffect | HeightEffect | MinHeightEffect | MaxHeightEffect;
export type MixedEffect = AnimationEffect | ObjectEffect;
export type ComposableEffect = MixedEffect | MixedEffect[];
export type AnimationEasing = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
export interface AnimationConfig {
    effect?: ComposableEffect;
    duration?: number;
    delayBefore?: number;
    easing?: AnimationEasing;
}
export interface PhraseStyle extends AnimationConfig {
    phrase: number | number[];
    className?: string;
    style?: CSSProperties;
    width?: string;
    minWidth?: string;
    maxWidth?: string;
    height?: string;
    minHeight?: string;
    maxHeight?: string;
    verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline' | 'text-top' | 'text-bottom';
}
export interface AnimationTiming {
    startDelay: number;
    itemSpacing: number;
    defaultDuration: number;
    defaultEffect: ComposableEffect;
    defaultEasing: AnimationEasing;
}
export declare const DEFAULT_TIMING: AnimationTiming;
export type FontPreset = 'hero' | 'section' | 'subsection' | 'body';
export declare const FONT_PRESETS: Record<FontPreset, string>;
export declare const getPhraseDelay: (index: number, styles?: PhraseStyle[], defaultSpacing?: number) => number;
export declare const getPhraseAnimationConfig: (index: number, styles?: PhraseStyle[], defaults?: AnimationTiming) => Required<AnimationConfig>;
//# sourceMappingURL=types.d.ts.map