/** * Animation presets for Motion component * Predefined animation configurations for common use cases */ export declare const animationPresets: { readonly fadeIn: { readonly initial: { readonly opacity: 0; }; readonly animate: { readonly opacity: 1; }; readonly exit: { readonly opacity: 0; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly fadeOut: { readonly initial: { readonly opacity: 1; }; readonly animate: { readonly opacity: 0; }; readonly exit: { readonly opacity: 1; }; readonly duration: 300; readonly easing: "ease-in"; }; readonly slideUp: { readonly initial: { readonly opacity: 0; readonly y: 20; }; readonly animate: { readonly opacity: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly y: 20; }; readonly duration: 400; readonly easing: "ease-out"; }; readonly slideDown: { readonly initial: { readonly opacity: 0; readonly y: -20; }; readonly animate: { readonly opacity: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly y: -20; }; readonly duration: 400; readonly easing: "ease-out"; }; readonly slideLeft: { readonly initial: { readonly opacity: 0; readonly x: 20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: 20; }; readonly duration: 400; readonly easing: "ease-out"; }; readonly slideRight: { readonly initial: { readonly opacity: 0; readonly x: -20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: -20; }; readonly duration: 400; readonly easing: "ease-out"; }; readonly scaleIn: { readonly initial: { readonly opacity: 0; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly scale: 0.9; }; readonly duration: 300; readonly easing: "spring"; }; readonly scaleOut: { readonly initial: { readonly opacity: 0; readonly scale: 1.1; }; readonly animate: { readonly opacity: 1; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly scale: 1.1; }; readonly duration: 300; readonly easing: "spring"; }; readonly rotateIn: { readonly initial: { readonly opacity: 0; readonly rotate: -10; }; readonly animate: { readonly opacity: 1; readonly rotate: 0; }; readonly exit: { readonly opacity: 0; readonly rotate: -10; }; readonly duration: 400; readonly easing: "spring"; }; readonly bounceIn: { readonly initial: { readonly opacity: 0; readonly scale: 0.3; }; readonly animate: { readonly opacity: 1; readonly scale: 1; readonly transition: { readonly type: "spring"; readonly damping: 10; readonly stiffness: 200; }; }; readonly exit: { readonly opacity: 0; readonly scale: 0.3; }; readonly duration: 600; }; readonly pulseIn: { readonly initial: { readonly opacity: 0.5; readonly scale: 1; }; readonly animate: { readonly opacity: 1; readonly scale: readonly [1, 1.05, 1]; readonly transition: { readonly duration: 0.5; readonly repeat: number; readonly repeatType: "reverse"; }; }; readonly exit: { readonly opacity: 0.5; readonly scale: 1; }; readonly duration: 500; }; readonly blur: { readonly initial: { readonly opacity: 0; readonly filter: "blur(4px)"; }; readonly animate: { readonly opacity: 1; readonly filter: "blur(0px)"; }; readonly exit: { readonly opacity: 0; readonly filter: "blur(4px)"; }; readonly duration: 400; readonly easing: "ease-out"; }; readonly dropIn: { readonly initial: { readonly opacity: 0; readonly y: -100; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly y: 0; readonly scale: 1; readonly transition: { readonly type: "spring"; readonly damping: 15; readonly stiffness: 150; }; }; readonly exit: { readonly opacity: 0; readonly y: 100; readonly scale: 0.9; }; readonly duration: 500; }; readonly flipIn: { readonly initial: { readonly opacity: 0; readonly rotateY: -90; }; readonly animate: { readonly opacity: 1; readonly rotateY: 0; readonly transition: { readonly duration: 0.6; readonly ease: "easeOut"; }; }; readonly exit: { readonly opacity: 0; readonly rotateY: 90; }; readonly duration: 600; }; readonly staggerChildren: { readonly animate: { readonly transition: { readonly staggerChildren: 0.1; readonly delayChildren: 0.2; }; }; }; readonly listItem: { readonly initial: { readonly opacity: 0; readonly x: -20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: 20; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly modalOverlay: { readonly initial: { readonly opacity: 0; }; readonly animate: { readonly opacity: 1; }; readonly exit: { readonly opacity: 0; }; readonly duration: 200; readonly easing: "ease-out"; }; readonly modalContent: { readonly initial: { readonly opacity: 0; readonly scale: 0.95; readonly y: 20; }; readonly animate: { readonly opacity: 1; readonly scale: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly scale: 0.95; readonly y: 20; }; readonly duration: 300; readonly easing: "spring"; }; readonly drawerLeft: { readonly initial: { readonly x: "-100%"; }; readonly animate: { readonly x: 0; }; readonly exit: { readonly x: "-100%"; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly drawerRight: { readonly initial: { readonly x: "100%"; }; readonly animate: { readonly x: 0; }; readonly exit: { readonly x: "100%"; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly drawerTop: { readonly initial: { readonly y: "-100%"; }; readonly animate: { readonly y: 0; }; readonly exit: { readonly y: "-100%"; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly drawerBottom: { readonly initial: { readonly y: "100%"; }; readonly animate: { readonly y: 0; }; readonly exit: { readonly y: "100%"; }; readonly duration: 300; readonly easing: "ease-out"; }; readonly notificationSlide: { readonly initial: { readonly opacity: 0; readonly x: 100; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly x: 0; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly x: 100; readonly scale: 0.9; }; readonly duration: 400; readonly easing: "spring"; }; readonly skeleton: { readonly animate: { readonly backgroundPosition: readonly ["200% 0", "-200% 0"]; readonly transition: { readonly duration: 1.5; readonly repeat: number; readonly ease: "linear"; }; }; }; }; export type AnimationPresetName = keyof typeof animationPresets; /** * Get animation preset configuration */ export declare const getAnimationPreset: (name: AnimationPresetName) => { readonly initial: { readonly opacity: 0; }; readonly animate: { readonly opacity: 1; }; readonly exit: { readonly opacity: 0; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 1; }; readonly animate: { readonly opacity: 0; }; readonly exit: { readonly opacity: 1; }; readonly duration: 300; readonly easing: "ease-in"; } | { readonly initial: { readonly opacity: 0; readonly y: 20; }; readonly animate: { readonly opacity: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly y: 20; }; readonly duration: 400; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly y: -20; }; readonly animate: { readonly opacity: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly y: -20; }; readonly duration: 400; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly x: 20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: 20; }; readonly duration: 400; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly x: -20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: -20; }; readonly duration: 400; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly scale: 0.9; }; readonly duration: 300; readonly easing: "spring"; } | { readonly initial: { readonly opacity: 0; readonly scale: 1.1; }; readonly animate: { readonly opacity: 1; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly scale: 1.1; }; readonly duration: 300; readonly easing: "spring"; } | { readonly initial: { readonly opacity: 0; readonly rotate: -10; }; readonly animate: { readonly opacity: 1; readonly rotate: 0; }; readonly exit: { readonly opacity: 0; readonly rotate: -10; }; readonly duration: 400; readonly easing: "spring"; } | { readonly initial: { readonly opacity: 0; readonly scale: 0.3; }; readonly animate: { readonly opacity: 1; readonly scale: 1; readonly transition: { readonly type: "spring"; readonly damping: 10; readonly stiffness: 200; }; }; readonly exit: { readonly opacity: 0; readonly scale: 0.3; }; readonly duration: 600; } | { readonly initial: { readonly opacity: 0.5; readonly scale: 1; }; readonly animate: { readonly opacity: 1; readonly scale: readonly [1, 1.05, 1]; readonly transition: { readonly duration: 0.5; readonly repeat: number; readonly repeatType: "reverse"; }; }; readonly exit: { readonly opacity: 0.5; readonly scale: 1; }; readonly duration: 500; } | { readonly initial: { readonly opacity: 0; readonly filter: "blur(4px)"; }; readonly animate: { readonly opacity: 1; readonly filter: "blur(0px)"; }; readonly exit: { readonly opacity: 0; readonly filter: "blur(4px)"; }; readonly duration: 400; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly y: -100; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly y: 0; readonly scale: 1; readonly transition: { readonly type: "spring"; readonly damping: 15; readonly stiffness: 150; }; }; readonly exit: { readonly opacity: 0; readonly y: 100; readonly scale: 0.9; }; readonly duration: 500; } | { readonly initial: { readonly opacity: 0; readonly rotateY: -90; }; readonly animate: { readonly opacity: 1; readonly rotateY: 0; readonly transition: { readonly duration: 0.6; readonly ease: "easeOut"; }; }; readonly exit: { readonly opacity: 0; readonly rotateY: 90; }; readonly duration: 600; } | { readonly animate: { readonly transition: { readonly staggerChildren: 0.1; readonly delayChildren: 0.2; }; }; } | { readonly initial: { readonly opacity: 0; readonly x: -20; }; readonly animate: { readonly opacity: 1; readonly x: 0; }; readonly exit: { readonly opacity: 0; readonly x: 20; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; }; readonly animate: { readonly opacity: 1; }; readonly exit: { readonly opacity: 0; }; readonly duration: 200; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly scale: 0.95; readonly y: 20; }; readonly animate: { readonly opacity: 1; readonly scale: 1; readonly y: 0; }; readonly exit: { readonly opacity: 0; readonly scale: 0.95; readonly y: 20; }; readonly duration: 300; readonly easing: "spring"; } | { readonly initial: { readonly x: "-100%"; }; readonly animate: { readonly x: 0; }; readonly exit: { readonly x: "-100%"; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly x: "100%"; }; readonly animate: { readonly x: 0; }; readonly exit: { readonly x: "100%"; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly y: "-100%"; }; readonly animate: { readonly y: 0; }; readonly exit: { readonly y: "-100%"; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly y: "100%"; }; readonly animate: { readonly y: 0; }; readonly exit: { readonly y: "100%"; }; readonly duration: 300; readonly easing: "ease-out"; } | { readonly initial: { readonly opacity: 0; readonly x: 100; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly x: 0; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly x: 100; readonly scale: 0.9; }; readonly duration: 400; readonly easing: "spring"; } | { readonly animate: { readonly backgroundPosition: readonly ["200% 0", "-200% 0"]; readonly transition: { readonly duration: 1.5; readonly repeat: number; readonly ease: "linear"; }; }; }; /** * Micro-interaction presets */ export declare const microInteractions: { readonly hover: { readonly scale: 1.02; readonly transition: { readonly duration: 0.2; readonly ease: "easeOut"; }; }; readonly tap: { readonly scale: 0.98; readonly transition: { readonly duration: 0.1; readonly ease: "easeOut"; }; }; readonly focus: { readonly scale: 1.01; readonly boxShadow: "0 0 0 2px var(--glass-color-primary, 0.5)"; readonly transition: { readonly duration: 0.2; readonly ease: "easeOut"; }; }; }; /** * Page transition presets */ export declare const pageTransitions: { readonly fade: { readonly initial: { readonly opacity: 0; }; readonly animate: { readonly opacity: 1; }; readonly exit: { readonly opacity: 0; }; readonly transition: { readonly duration: 0.3; }; }; readonly slide: { readonly initial: { readonly x: "100%"; }; readonly animate: { readonly x: 0; }; readonly exit: { readonly x: "-100%"; }; readonly transition: { readonly duration: 0.3; readonly ease: "easeInOut"; }; }; readonly scale: { readonly initial: { readonly opacity: 0; readonly scale: 0.9; }; readonly animate: { readonly opacity: 1; readonly scale: 1; }; readonly exit: { readonly opacity: 0; readonly scale: 1.1; }; readonly transition: { readonly duration: 0.3; readonly ease: "easeInOut"; }; }; }; //# sourceMappingURL=presets.d.ts.map